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

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-dropdown-menu"), require("react-device-detect"), require("@radix-ui/react-dialog"), require("re-resizable"), require("@radix-ui/react-dismissable-layer"), require("react-transition-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-error-boundary"), require("feather-icons-react"), require("react-dom"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-dropdown-menu", "react-device-detect", "@radix-ui/react-dialog", "re-resizable", "@radix-ui/react-dismissable-layer", "react-transition-group", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-error-boundary", "feather-icons-react", "react-dom", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixDropdownMenu, global.reactDeviceDetect, global.RadixDialogPrimitive, global.reResizable, global.reactDismissableLayer, global.reactTransitionGroup, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactErrorBoundary, global.FeatherIcon, global.reactDom, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js));
-})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixDropdownMenu, reactDeviceDetect, RadixDialogPrimitive, reResizable, reactDismissableLayer, reactTransitionGroup, reactToggleGroup, reactToolbar, RadixToast, reactErrorBoundary, FeatherIcon, reactDom, table_js, theme_js, sort_js, select_js, pagination_js) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@radix-ui/themes"), require("react"), require("react-responsive"), require("@radix-ui/react-icons"), require("@radix-ui/react-dropdown-menu"), require("react-device-detect"), require("@radix-ui/react-dialog"), require("re-resizable"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@radix-ui/react-dismissable-layer"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-toolbar"), require("@radix-ui/react-toast"), require("react-error-boundary"), require("feather-icons-react"), require("@table-library/react-table-library/table.js"), require("@table-library/react-table-library/theme.js"), require("@table-library/react-table-library/sort.js"), require("@table-library/react-table-library/select.js"), require("@table-library/react-table-library/pagination.js")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@radix-ui/themes", "react", "react-responsive", "@radix-ui/react-icons", "@radix-ui/react-dropdown-menu", "react-device-detect", "@radix-ui/react-dialog", "re-resizable", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@radix-ui/react-dismissable-layer", "@radix-ui/react-toggle-group", "@radix-ui/react-toolbar", "@radix-ui/react-toast", "react-error-boundary", "feather-icons-react", "@table-library/react-table-library/table.js", "@table-library/react-table-library/theme.js", "@table-library/react-table-library/sort.js", "@table-library/react-table-library/select.js", "@table-library/react-table-library/pagination.js"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.jsxRuntime, global.themes, global.React, global.reactResponsive, global.reactIcons, global.RadixDropdownMenu, global.reactDeviceDetect, global.RadixDialogPrimitive, global.reResizable, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.reactDismissableLayer, global.reactToggleGroup, global.reactToolbar, global.RadixToast, global.reactErrorBoundary, global.FeatherIcon, global.table_js, global.theme_js, global.sort_js, global.select_js, global.pagination_js));
+})(this, function(exports2, jsxRuntime, themes, React, reactResponsive, reactIcons, RadixDropdownMenu, reactDeviceDetect, RadixDialogPrimitive, reResizable, reactTransitionGroup, ReactDOM, reactSlot, reactDismissableLayer, reactToggleGroup, reactToolbar, RadixToast, reactErrorBoundary, FeatherIcon, table_js, theme_js, sort_js, select_js, pagination_js) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -211,7 +211,7 @@
   const zeroMinWidth = "_zeroMinWidth_curjh_1";
   const zeroMinHeight = "_zeroMinHeight_curjh_5";
   const radius = "_radius_curjh_9";
-  const styles$m = {
+  const styles$n = {
     zeroMinWidth,
     zeroMinHeight,
     radius
@@ -223,9 +223,9 @@
           themes.Flex,
           {
             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,
@@ -278,16 +278,16 @@
   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 === " ") {
@@ -308,12 +308,12 @@
   const useButtonGroupContext = () => React.useContext(ButtonGroupContext);
   const spinner = "_spinner_isifr_9";
   const spin = "_spin_isifr_9";
-  const styles$k = {
+  const styles$l = {
     spinner,
     spin
   };
   const Spinner = React.memo(() => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.spinner });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.spinner });
   });
   Spinner.displayName = "Spinner";
   const _Button$1 = React.forwardRef(function Button(props, ref) {
@@ -349,7 +349,7 @@
         ref,
         type,
         className: classNames(className, hoverEffectClasses, {
-          [styles$l.fluid]: fluid2
+          [styles$m.fluid]: fluid2
         }),
         color,
         size: useResponsiveMapping(size, SizeMapping),
@@ -391,7 +391,7 @@
       themes.IconButton,
       {
         className: classNames(className, hoverEffectClasses, {
-          [styles$l.fluid]: fluid2
+          [styles$m.fluid]: fluid2
         }),
         ref,
         color,
@@ -406,7 +406,7 @@
   });
   const IconButton = React.memo(_Button);
   const merged = "_merged_wdgxo_1";
-  const styles$j = {
+  const styles$k = {
     merged
   };
   const GhostVariantSizeToGapMapping = {
@@ -433,7 +433,7 @@
       themes.Flex,
       {
         className: classNames("overmap-button-group", className, {
-          [styles$j.merged]: merged2
+          [styles$k.merged]: merged2
         }),
         ref,
         gap: merged2 ? gap ?? mergedAutoGap : gap ?? "2",
@@ -446,7 +446,7 @@
   });
   const ButtonGroup = React.memo(_ButtonGroup);
   const separators = "_separators_1f7v1_1";
-  const styles$i = {
+  const styles$j = {
     separators
   };
   const ButtonListBorder = React.memo(
@@ -477,7 +477,7 @@
           size,
           severity: "info",
           variant: buttonVariant,
-          className: classNames(className, styles$i.separators),
+          className: classNames(className, styles$j.separators),
           merged: true,
           gap: "0",
           direction: "column",
@@ -672,7 +672,7 @@
   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,
@@ -683,7 +683,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx(
         themes.Box,
         {
-          className: classNames(styles$h.BaseMenuItem, className),
+          className: classNames(styles$i.BaseMenuItem, className),
           ref,
           position: "relative",
           px: "2",
@@ -699,11 +699,11 @@
   );
   const BaseMenuInput = React.memo(
     React.forwardRef((props) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { ...props, variant: "ghost" }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$i.BaseMenuInput, px: "2", height: "6", width: "max-content", children: /* @__PURE__ */ jsxRuntime.jsx(Input, { ...props, variant: "ghost" }) });
     })
   );
   const BaseMenuSeparator = React.memo(function BaseMenuSeparator2() {
-    return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$h.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { height: "0", width: "100%" }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { className: styles$i.BaseMenuSeparator, width: "100%", py: "1", children: /* @__PURE__ */ jsxRuntime.jsx(themes.Box, { height: "0", width: "100%" }) });
   });
   const useCloseOnSelectHandler = (closeOnSelect) => {
     return React.useCallback(
@@ -766,7 +766,7 @@
           const itemContent = /* @__PURE__ */ jsxRuntime.jsx(
             ItemElement,
             {
-              className: classNames(className, styles$h.RemoveOutline),
+              className: classNames(className, styles$i.RemoveOutline),
               onSelect: closeOnSelectHandler(onSelect),
               textValue: "",
               asChild: true,
@@ -829,7 +829,7 @@
         items.map(({ content, value: itemValue, onSelect, ...rest }, index) => /* @__PURE__ */ jsxRuntime.jsx(
           ItemElement,
           {
-            className: styles$h.RemoveOutline,
+            className: styles$i.RemoveOutline,
             checked: itemValue === value,
             onCheckedChange: handleCheckedChange(itemValue),
             onSelect: closeOnSelectHandler(onSelect),
@@ -908,7 +908,7 @@
         items.map(({ value, content, className, onSelect, ...rest }, index) => /* @__PURE__ */ jsxRuntime.jsx(
           ItemElement,
           {
-            className: classNames(className, styles$h.RemoveOutline),
+            className: classNames(className, styles$i.RemoveOutline),
             onSelect: closeOnSelectHandler(onSelect),
             onCheckedChange: handleCheckedChange(value),
             checked: values.includes(value),
@@ -940,7 +940,7 @@
   }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(GroupElement, { ...rest, children: items.map(({ triggerIndicator, content, subContent, className, ...rest2 }, index) => /* @__PURE__ */ jsxRuntime.jsxs(SubElement, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SubTriggerElement, { className: classNames(className, styles$h.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsxRuntime.jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(SubTriggerElement, { className: classNames(className, styles$i.RemoveOutline), asChild: true, ...rest2, children: /* @__PURE__ */ jsxRuntime.jsx(BaseMenuItem, { rightSlot: triggerIndicator, children: content }) }),
         /* @__PURE__ */ jsxRuntime.jsx(SubContentElement, { sideOffset: 10, children: subContent })
       ] }, index)) }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(BaseMenuSeparator, {})
@@ -1097,7 +1097,7 @@
     });
   });
   const fluid = "_fluid_7n1wr_1";
-  const styles$g = {
+  const styles$h = {
     fluid
   };
   const _Select = React.forwardRef(function Select2({
@@ -1121,7 +1121,7 @@
       themes.Select.Trigger,
       {
         className: classNames(className, {
-          [styles$g.fluid]: fluid2
+          [styles$h.fluid]: fluid2
         }),
         id,
         ref,
@@ -1133,7 +1133,7 @@
       themes.Select.Content,
       {
         side,
-        className: styles$g.contentDefault,
+        className: styles$h.contentDefault,
         position: "popper",
         variant: variant !== "surface" ? "soft" : "solid",
         color: itemSeverityColor,
@@ -1246,7 +1246,7 @@
       );
     })
   );
-  const styles$f = {
+  const styles$g = {
     "default": "_default_u936h_1"
   };
   const _Switch = React.forwardRef(function Switch2({ className, severity = "primary", icon, defaultChecked = false, onCheckedChange, ...rest }, ref) {
@@ -1274,7 +1274,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         themes.Switch,
         {
-          className: classNames("overmap-switch", className, styles$f.default),
+          className: classNames("overmap-switch", className, styles$g.default),
           ref: ref ? ref : fallbackRef,
           color: severityColor,
           radius: "full",
@@ -1288,15 +1288,15 @@
   });
   const Switch = React.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%" };
@@ -1325,13 +1325,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$e.overlay) }),
+      overlay2 && /* @__PURE__ */ jsxRuntime.jsx(RadixDialogPrimitive__namespace.Overlay, { className: classNames(styles$f.overlay) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         RadixDialogPrimitive__namespace.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,
@@ -1343,7 +1343,7 @@
               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__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {}),
                 left: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DragHandleDots2Icon, {})
@@ -1356,111 +1356,568 @@
     ] }) });
   });
   const Sidebar = React.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 = React.createContext({});
+  const Root$1 = React.memo((props) => {
+    const { children, small = false, hideLayout = false } = props;
+    const [showLeftSlideOut, setShowLeftSlideOut] = React.useState(false);
+    const [showRightSlideOut, setShowRightSlideOut] = React.useState(false);
+    const contextValue = React.useMemo(
+      () => ({
+        small,
+        hideLayout,
+        showLeftSlideOut,
+        setShowLeftSlideOut,
+        showRightSlideOut,
+        setShowRightSlideOut
+      }),
+      [hideLayout, showLeftSlideOut, showRightSlideOut, small]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.Provider, { value: contextValue, children });
+  });
+  Root$1.displayName = "Layout.Root";
+  const useLayoutContext = () => React.useContext(LayoutContext);
+  const Container = React.memo(
+    React.forwardRef((props, ref) => {
+      const { children, style, grow = "1", height = "100%", position, ...rest } = props;
+      const { hideLayout = false } = useLayoutContext();
+      return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { ref, grow, height, position, style, ...rest, children });
+    })
+  );
+  const SlideOutOverlay = React.memo(
+    React.forwardRef((props, ref) => {
+      const { className, style, active, side, smallModeOnly = false } = props;
+      const { small, hideLayout, showLeftSlideOut, showRightSlideOut } = useLayoutContext();
+      const showOverlay = React.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__ */ jsxRuntime.jsx(
+        themes.Flex,
+        {
+          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 = React.useRef(false);
+    const handleClickRef = React.useRef(() => {
+    });
+    React.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 = React.useRef(callback);
+    React.useEffect(() => {
+      callbackRef.current = callback;
+    });
+    return React.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 = React.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 = React.useRef(null);
-    const [slideOutWidth, setSideBarWith] = React.useState(minWidth);
-    const isSideLeft = side === "left";
-    const isSideRight = side === "right";
-    const handleResize = React.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 = React.memo(
+    React.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] = React.useState(document.body);
+      const childrenContainerRef = React.useRef(null);
+      const [slideOutWidth, setSlideOutWidth] = React.useState(initialWidth);
+      const handleResize = React.useCallback(
+        (_event, _dir, ref2, _delta) => {
+          setSlideOutWidth(ref2.clientWidth);
+        },
+        []
+      );
+      const handleDismiss = React.useCallback(() => {
+        if (modal && onDismiss) {
+          onDismiss();
         }
-      },
-      []
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      reactTransitionGroup.CSSTransition,
-      {
-        in: open,
-        classNames: {
-          enter: styles$d.enter,
-          enterActive: styles$d.enterActive,
-          exitActive: styles$d.exitActive,
-          exitDone: styles$d.exitDone
+      }, [modal, onDismiss]);
+      const handleAssignParentContainer = React.useCallback((element) => {
+        if (element) {
+          setParentContainer(element);
+        }
+      }, []);
+      React.useEffect(() => {
+        setSlideOutWidth(initialWidth);
+      }, [initialWidth]);
+      React.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 = React.useMemo(
+        () => ({
+          enter: isLeft ? styles$e.EnterLeft : styles$e.EnterRight,
+          enterActive: isLeft ? styles$e.EnterActiveLeft : styles$e.EnterActiveRight,
+          enterDone: isLeft ? styles$e.EnterDoneLeft : styles$e.EnterDoneRight,
+          exit: isLeft ? styles$e.ExitLeft : styles$e.ExitRight,
+          exitActive: isLeft ? styles$e.ExitActiveLeft : styles$e.ExitActiveRight,
+          exitDone: isLeft ? styles$e.ExitDoneLeft : styles$e.ExitDoneRight
+        }),
+        [isLeft]
+      );
+      const resizableSize = React.useMemo(
+        () => (
+          // prettier-ignore
+          { width: slideOutWidth, height: "100%" }
+        ),
+        [slideOutWidth]
+      );
+      const resizableStyle = React.useMemo(
+        () => ({
+          position,
+          "--slide-out-width": `${slideOutWidth}${typeof slideOutWidth === "number" ? "px" : ""}`
+        }),
+        [position, slideOutWidth]
+      );
+      const resizableEnable = React.useMemo(
+        () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
+        [isLeft, resizeable]
+      );
+      const SlideOut2 = React.useMemo(
+        () => /* @__PURE__ */ jsxRuntime.jsx(
+          reactTransitionGroup.CSSTransition,
+          {
+            classNames: CSSTransitionClassNames,
+            in: open,
+            timeout: TIMEOUT_DURATION$1,
+            unmountOnExit: true,
+            mountOnEnter: true,
+            onEntering: onOpening,
+            onExited: onClosed,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              themes.Flex,
+              {
+                className,
+                top: "0",
+                bottom: "0",
+                left: isLeft ? "0" : void 0,
+                right: !isLeft ? "0" : void 0,
+                position,
+                asChild: true,
+                style,
+                onPointerDownCapture: handlePointerDownCapture,
+                ref,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reResizable.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__ */ jsxRuntime.jsxs(
+        themes.Flex,
+        {
+          ref: handleAssignParentContainer,
+          width: "100%",
+          height: "100%",
+          direction: "row",
+          position: "relative",
+          style: { overflow: "hidden" },
+          children: [
+            side === "left" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              open && overlayComponent,
+              " ",
+              SlideOut2
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(themes.Flex, { ref: childrenContainerRef, grow: "1", height: "100%", children }),
+            side === "right" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              open && overlayComponent,
+              " ",
+              SlideOut2
+            ] })
+          ]
+        }
+      );
+    })
+  );
+  const DEFAULT_INITIAL_WIDTH = "30%";
+  const SlideOut = React.memo(
+    React.forwardRef((props, ref) => {
+      const { small, hideLayout } = useLayoutContext();
+      const { className, showSlideOut, setShowSlideOut, defaultOpen, side, ...rest } = props;
+      React.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 = React.useCallback(() => {
+        setShowSlideOut(false);
+      }, [setShowSlideOut]);
+      const mergedProps = React.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__ */ jsxRuntime.jsx(
+        SlideOutV3,
+        {
+          className: classNames(`overmap-layout-slideOut-${side}`, className),
+          side,
+          ref,
+          ...mergedProps
+        }
+      );
+    })
+  );
+  const LeftSlideOut = React.memo(
+    React.forwardRef((props, ref) => {
+      const { showLeftSlideOut, setShowLeftSlideOut } = useLayoutContext();
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SlideOut,
+        {
+          side: "left",
+          showSlideOut: showLeftSlideOut,
+          setShowSlideOut: setShowLeftSlideOut,
+          ref,
+          ...props
+        }
+      );
+    })
+  );
+  const RightSlideOut = React.memo(
+    React.forwardRef((props, ref) => {
+      const { showRightSlideOut, setShowRightSlideOut } = useLayoutContext();
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        SlideOut,
+        {
+          side: "right",
+          showSlideOut: showRightSlideOut,
+          setShowSlideOut: setShowRightSlideOut,
+          ref,
+          ...props
+        }
+      );
+    })
+  );
+  const SlideOutTrigger = React.memo(
+    React.forwardRef((props, ref) => {
+      const { side, children } = props;
+      const { setShowLeftSlideOut, setShowRightSlideOut } = useLayoutContext();
+      const handleClick = React.useCallback(() => {
+        if (side === "left") {
+          setShowLeftSlideOut((prevState) => !prevState);
+        } else {
+          setShowRightSlideOut((prevState) => !prevState);
+        }
+      }, [setShowLeftSlideOut, setShowRightSlideOut, side]);
+      return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.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 = React.memo(
+    React.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] = React.useState(initialWidth);
+      const handleResize = React.useCallback(
+        (_event, _dir, ref2, _delta) => {
+          setSlideOutWidth(ref2.clientWidth);
         },
-        timeout: TRANSITION_DURATION$1,
-        nodeRef: contentRef,
-        unmountOnExit: true,
-        mountOnEnter: true,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          overlay2 && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: classNames("overmap-slide-out-overlay", styles$d.slideOutOverlay, overlayClassName)
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(reactDismissableLayer.DismissableLayer, { disableOutsidePointerEvents: modal, asChild: true, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
-            themes.Flex,
-            {
-              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__ */ jsxRuntime.jsx(
-                reResizable.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 = React.useCallback(
+        (event) => {
+          if (modal && onDismiss) {
+            onDismiss(event);
+          }
+        },
+        [modal, onDismiss]
+      );
+      React.useEffect(() => {
+        setSlideOutWidth(initialWidth);
+      }, [initialWidth]);
+      const CSSTransitionClassNames = React.useMemo(
+        () => ({
+          enter: isLeft ? styles$d.EnterLeft : styles$d.EnterRight,
+          enterActive: isLeft ? styles$d.EnterActiveLeft : styles$d.EnterActiveRight,
+          enterDone: isLeft ? styles$d.EnterDoneLeft : styles$d.EnterDoneRight,
+          exit: isLeft ? styles$d.ExitLeft : styles$d.ExitRight,
+          exitActive: isLeft ? styles$d.ExitActiveLeft : styles$d.ExitActiveRight,
+          exitDone: isLeft ? styles$d.ExitDoneLeft : styles$d.ExitDoneRight
+        }),
+        [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__ */ jsxRuntime.jsx(
+          reactTransitionGroup.CSSTransition,
+          {
+            classNames: CSSTransitionClassNames,
+            in: open,
+            timeout: TIMEOUT_DURATION,
+            unmountOnExit: true,
+            mountOnEnter: true,
+            onEntering: onOpening,
+            onExited: onClosed,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactDismissableLayer.DismissableLayer,
+              {
+                disableOutsidePointerEvents: modal,
+                style,
+                onInteractOutside: handleDismiss,
+                onEscapeKeyDown: handleDismiss,
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  themes.Flex,
+                  {
+                    className,
+                    ref,
+                    top: "0",
+                    bottom: "0",
+                    left: isLeft ? "0" : void 0,
+                    right: !isLeft ? "0" : void 0,
+                    position,
+                    asChild: true,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      reResizable.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";
@@ -2613,7 +3070,7 @@
           const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current);
           const isCurrentAnimation = currentAnimationName.includes(event.animationName);
           if (event.target === node1 && isCurrentAnimation)
-            reactDom.flushSync(
+            ReactDOM.flushSync(
               () => send("ANIMATION_END")
             );
         };
@@ -2650,77 +3107,6 @@
   function $921a889cee6df7e8$var$getAnimationName(styles2) {
     return (styles2 === null || styles2 === void 0 ? void 0 : styles2.animationName) || "none";
   }
-  const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    const childrenArray = React.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 (React.Children.count(newElement) > 1)
-            return React.Children.only(null);
-          return /* @__PURE__ */ React.isValidElement(newElement) ? newElement.props.children : null;
-        } else
-          return child;
-      });
-      return /* @__PURE__ */ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
-        ref: forwardedRef
-      }), /* @__PURE__ */ React.isValidElement(newElement) ? /* @__PURE__ */ React.cloneElement(newElement, void 0, newChildren) : null);
-    }
-    return /* @__PURE__ */ React.createElement($5e63c961fc1ce211$var$SlotClone, _extends({}, slotProps, {
-      ref: forwardedRef
-    }), children);
-  });
-  $5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = "Slot";
-  const $5e63c961fc1ce211$var$SlotClone = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
-    const { children, ...slotProps } = props;
-    if (/* @__PURE__ */ React.isValidElement(children))
-      return /* @__PURE__ */ React.cloneElement(children, {
-        ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
-        ref: forwardedRef ? $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) : children.ref
-      });
-    return React.Children.count(children) > 1 ? React.Children.only(null) : null;
-  });
-  $5e63c961fc1ce211$var$SlotClone.displayName = "SlotClone";
-  const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children }) => {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
-  };
-  function $5e63c961fc1ce211$var$isSlottable(child) {
-    return /* @__PURE__ */ React.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",
@@ -2742,7 +3128,7 @@
   const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node) => {
     const Node = /* @__PURE__ */ React.forwardRef((props, forwardedRef) => {
       const { asChild, ...primitiveProps } = props;
-      const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node;
+      const Comp = asChild ? reactSlot.Slot : node;
       React.useEffect(() => {
         window[Symbol.for("radix-ui")] = true;
       }, []);
@@ -2892,22 +3278,29 @@
   }
   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 = React.forwardRef(function Checkbox2({ className, labelClassName, label, checked, onCheckedChange, alwaysShow = true, ...rest }, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { className: styles$2.checkboxContainer, ...props, children: [
+  const _Checkbox = React.forwardRef(function Checkbox2({
+    className,
+    labelClassName,
+    label,
+    checked,
+    onCheckedChange,
+    checkboxPosition = "center",
+    alwaysShow = true,
+    ...rest
+  }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx(HoverUtility, { children: ({ isHovered, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(themes.Flex, { align: checkboxPosition, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         $e698a72e93240346$export$be92b6f5f03c0fe9,
         {
@@ -3731,17 +4124,18 @@
   exports2.IconButton = IconButton;
   exports2.IconColorUtility = IconColorUtility;
   exports2.Input = Input;
+  exports2.Layout = Layout;
   exports2.LeftAndRightPanels = LeftAndRightPanels;
   exports2.MultiPagePopover = MultiPagePopover;
   exports2.MultiSelect = MultiSelect;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
   exports2.Popover = Popover;
-  exports2.Root = Root;
   exports2.Select = Select;
   exports2.SelectAllCheckbox = SelectAllCheckbox;
   exports2.Separator = Separator;
   exports2.Sidebar = Sidebar;
-  exports2.SlideOut = SlideOut;
+  exports2.SlideOutV2 = SlideOutV2;
+  exports2.SlideOutV3 = SlideOutV3;
   exports2.Spinner = Spinner;
   exports2.Switch = Switch;
   exports2.Table = Table;
@@ -3758,6 +4152,7 @@
   exports2.useAlertDialog = useAlertDialog;
   exports2.useDiscardAlertDialog = useDiscardAlertDialog;
   exports2.useKeyboardShortcut = useKeyboardShortcut;
+  exports2.useLayoutContext = useLayoutContext;
   exports2.useSeverityColor = useSeverityColor;
   exports2.useStopEventPropagation = useStopEventPropagation;
   exports2.useTextFilter = useTextFilter;