@overmap-ai/blocks 1.0.40-phone-input.0 → 1.0.40-slide-out-resize-handle.0

package/dist/blocks.umd.cjs

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/react-alert-dialog"), require("react/jsx-runtime"), require("class-variance-authority"), require("react"), require("@radix-ui/react-avatar"), require("@radix-ui/react-checkbox"), require("react-responsive"), require("cmdk"), require("@radix-ui/react-dialog"), require("react-day-picker"), require("lucide-react/dynamic"), require("@radix-ui/react-hover-card"), require("react-transition-group"), require("react-dom"), require("@radix-ui/react-slot"), require("@floating-ui/react"), require("@radix-ui/react-separator"), require("@radix-ui/react-one-time-password-field"), require("react-error-boundary"), require("react-phone-number-input"), require("lucide-react"), require("react-phone-number-input/min"), require("@radix-ui/react-popover"), require("@radix-ui/react-progress"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-tabs"), require("@radix-ui/react-slider"), require("@radix-ui/react-switch"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("@radix-ui/react-tooltip")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/react-alert-dialog", "react/jsx-runtime", "class-variance-authority", "react", "@radix-ui/react-avatar", "@radix-ui/react-checkbox", "react-responsive", "cmdk", "@radix-ui/react-dialog", "react-day-picker", "lucide-react/dynamic", "@radix-ui/react-hover-card", "react-transition-group", "react-dom", "@radix-ui/react-slot", "@floating-ui/react", "@radix-ui/react-separator", "@radix-ui/react-one-time-password-field", "react-error-boundary", "react-phone-number-input", "lucide-react", "react-phone-number-input/min", "@radix-ui/react-popover", "@radix-ui/react-progress", "@radix-ui/react-radio-group", "@radix-ui/react-toggle-group", "@radix-ui/react-tabs", "@radix-ui/react-slider", "@radix-ui/react-switch", "@radix-ui/react-toast", "@radix-ui/react-toggle", "@radix-ui/react-tooltip"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.RadixAlertDialog, global.jsxRuntime, global.classVarianceAuthority, global.react, global.RadixAvatar, global.RadixCheckbox, global.reactResponsive, global.cmdk, global.RadixDialog, global.reactDayPicker, global.dynamic, global.RadixHoverCard, global.reactTransitionGroup, global.ReactDOM, global.reactSlot, global.react$1, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.PhoneInput, global.lucideReact, global.min, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.Toggle, global.RadixTooltip));
-})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, react, RadixAvatar, RadixCheckbox, reactResponsive, cmdk, RadixDialog, reactDayPicker, dynamic, RadixHoverCard, reactTransitionGroup, ReactDOM, reactSlot, react$1, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, PhoneInput, lucideReact, min, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, Toggle, RadixTooltip) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@radix-ui/react-alert-dialog"), require("react/jsx-runtime"), require("class-variance-authority"), require("react"), require("@radix-ui/react-avatar"), require("@radix-ui/react-checkbox"), require("react-responsive"), require("cmdk"), require("@radix-ui/react-dialog"), require("react-day-picker"), require("lucide-react"), require("@radix-ui/react-hover-card"), require("@radix-ui/react-slot"), require("react-transition-group"), require("react-transition-group/CSSTransition"), require("react-dom"), require("@floating-ui/react"), require("@radix-ui/react-separator"), require("@radix-ui/react-one-time-password-field"), require("react-error-boundary"), require("@radix-ui/react-popover"), require("@radix-ui/react-progress"), require("@radix-ui/react-radio-group"), require("@radix-ui/react-toggle-group"), require("@radix-ui/react-tabs"), require("@radix-ui/react-slider"), require("@radix-ui/react-switch"), require("@radix-ui/react-toast"), require("@radix-ui/react-toggle"), require("@radix-ui/react-tooltip")) : typeof define === "function" && define.amd ? define(["exports", "@radix-ui/react-alert-dialog", "react/jsx-runtime", "class-variance-authority", "react", "@radix-ui/react-avatar", "@radix-ui/react-checkbox", "react-responsive", "cmdk", "@radix-ui/react-dialog", "react-day-picker", "lucide-react", "@radix-ui/react-hover-card", "@radix-ui/react-slot", "react-transition-group", "react-transition-group/CSSTransition", "react-dom", "@floating-ui/react", "@radix-ui/react-separator", "@radix-ui/react-one-time-password-field", "react-error-boundary", "@radix-ui/react-popover", "@radix-ui/react-progress", "@radix-ui/react-radio-group", "@radix-ui/react-toggle-group", "@radix-ui/react-tabs", "@radix-ui/react-slider", "@radix-ui/react-switch", "@radix-ui/react-toast", "@radix-ui/react-toggle", "@radix-ui/react-tooltip"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.blocks = {}, global.RadixAlertDialog, global.jsxRuntime, global.classVarianceAuthority, global.react, global.RadixAvatar, global.RadixCheckbox, global.reactResponsive, global.cmdk, global.RadixDialog, global.reactDayPicker, global.lucideReact, global.RadixHoverCard, global.reactSlot, global.reactTransitionGroup, null, global.ReactDOM, global.react$1, global.RadixSeparator, global.RadixOneTimePasswordField, global.reactErrorBoundary, global.RadixPopover, global.RadixProgress, global.RadixRadioGroup, global.RadixToggleGroup, global.RadixTabs, global.RadixSlider, global.RadixSwitch, global.RadixToast, global.Toggle, global.RadixTooltip));
+})(this, function(exports2, RadixAlertDialog, jsxRuntime, classVarianceAuthority, react, RadixAvatar, RadixCheckbox, reactResponsive, cmdk, RadixDialog, reactDayPicker, lucideReact, RadixHoverCard, reactSlot, reactTransitionGroup, CSSTransition, ReactDOM, react$1, RadixSeparator, RadixOneTimePasswordField, reactErrorBoundary, RadixPopover, RadixProgress, RadixRadioGroup, RadixToggleGroup, RadixTabs, RadixSlider, RadixSwitch, RadixToast, Toggle, RadixTooltip) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -1655,21 +1655,21 @@
     PageTriggerItem: CommandMenuPageTriggerItem
   };
   const LuIcon = react.memo((props) => {
-    const { ref, icon, className, size = "1em", ...rest } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(dynamic.DynamicIcon, { ref, className: classVarianceAuthority.cx("shrink-0", className), size, name: icon, ...rest });
+    const { ref, icon: Icon, className, size = "1em", ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(Icon, { ref, className: classVarianceAuthority.cx("shrink-0", className), size, ...rest });
   });
   LuIcon.displayName = "LuIcon";
   const Chevron = (props) => {
     const { orientation, ...rest } = props;
     switch (orientation) {
       case "up":
-        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "chevron-up", ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronUp, ...rest });
       case "down":
-        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "chevron-down", ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronDown, ...rest });
       case "left":
-        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "chevron-left", ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronLeft, ...rest });
       default:
-        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "chevron-right", ...rest });
+        return /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.ChevronRight, ...rest });
     }
   };
   const rootCva = classVarianceAuthority.cva(["relative", "size-max"], {
@@ -2234,9 +2234,9 @@
   const LayoutContext = react.createContext({});
   const useLayoutContext = () => react.useContext(LayoutContext);
   const LayoutContainer = react.memo((props) => {
-    const { ref, children, className, ...rest } = props;
+    const { ref, children, ...rest } = props;
     const { hideLayout = false } = useLayoutContext();
-    return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("flex h-full grow", className), ref, ...rest, children });
+    return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...rest, children });
   });
   LayoutContainer.displayName = "LayoutContainer";
   const LayoutRoot = react.memo((props) => {
@@ -2263,6 +2263,23 @@
     return /* @__PURE__ */ jsxRuntime.jsx(LayoutContext.Provider, { value: contextValue, children });
   });
   LayoutRoot.displayName = "LayoutRoot";
+  const SlideOutRootContext = react.createContext({});
+  const SlideOutContextContext = react.createContext({});
+  const SlideOutClose = react.memo((props) => {
+    const { ref, onClick, disabled, ...rest } = props;
+    const { setOpen } = react.use(SlideOutRootContext);
+    const handleClick = react.useCallback(
+      (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (e.defaultPrevented) return;
+        setOpen(false);
+      },
+      [onClick, setOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, onClick: handleClick, "data-disabled": disabled ?? false, ...rest });
+  });
+  SlideOutClose.displayName = "SlideOutClose";
+  const TIMEOUT_DURATION = 200;
   function usePointerDownOutside(onPointerDownOutside, ownerElement = globalThis == null ? void 0 : globalThis.document.body) {
     const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
     const isPointerInsideReactTreeRef = react.useRef(false);
@@ -2324,293 +2341,372 @@
       return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
     }, []);
   }
-  const TIMEOUT_DURATION = 200;
-  const SlideOut = react.memo((props) => {
-    const {
-      ref,
-      children,
-      className,
-      style,
-      open,
-      hide = false,
-      modal = false,
-      overlayComponent,
-      resizeable = true,
-      side,
-      position = "relative",
-      initialWidth,
-      minWidth,
-      maxWidth,
-      onDismiss,
-      onOpening,
-      onClosed,
-      content,
-      ...otherProps
-    } = props;
-    const isLeft = side === "left";
-    const [parentContainer, setParentContainer] = react.useState(document.body);
-    const childrenContainerRef = react.useRef(null);
-    const localRef = react.useRef(null);
-    const nodeRef = react.useRef(null);
-    const mergedRefs = mergeRefs([ref, localRef, nodeRef]);
-    const [isResizing, setIsResizing] = react.useState(false);
-    const [computedWidth, setComputedWidth] = react.useState(null);
-    const prevClientX = react.useRef(null);
-    const handleDismiss = react.useCallback(() => {
-      if (modal && onDismiss) {
-        onDismiss();
-      }
-    }, [modal, onDismiss]);
-    const handleAssignParentContainer = react.useCallback((element) => {
-      if (element) {
-        setParentContainer(element);
+  const SlideOutContent = react.memo((props) => {
+    const { ref, children, style, side, type, resizeable = false, initialSize, minSize, maxSize, hide, ...rest } = props;
+    const internalRef = react.useRef(null);
+    const { open, setOpen, parentElement, modal } = react.use(SlideOutRootContext);
+    const [computedSize, setComputedSize] = react.useState(null);
+    const handleClose = react.useCallback(() => {
+      if (modal) setOpen(false);
+    }, [modal, setOpen]);
+    const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(
+      handleClose,
+      parentElement ?? void 0
+    );
+    react.useLayoutEffect(() => {
+      if (!open || !internalRef.current) return;
+      const { offsetWidth, offsetHeight } = internalRef.current;
+      switch (side) {
+        case "left":
+        case "right":
+          setComputedSize(offsetWidth);
+          break;
+        case "top":
+        case "bottom":
+          setComputedSize(offsetHeight);
+      }
+    }, [open, side]);
+    const computedStyle = react.useMemo(() => {
+      switch (side) {
+        case "left":
+          return {
+            ...style,
+            left: 0,
+            width: computedSize ?? initialSize,
+            maxWidth: maxSize,
+            minWidth: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
+        case "right":
+          return {
+            ...style,
+            right: 0,
+            width: computedSize ?? initialSize,
+            maxWidth: maxSize,
+            minWidth: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
+        case "top":
+          return {
+            ...style,
+            top: 0,
+            height: computedSize ?? initialSize,
+            maxHeight: maxSize,
+            minHeight: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
+        case "bottom":
+          return {
+            ...style,
+            bottom: 0,
+            height: computedSize ?? initialSize,
+            maxHeight: maxSize,
+            minHeight: minSize,
+            position: type === "inline" ? "relative" : "absolute",
+            "--slide-out-size": `${computedSize}px`
+          };
       }
-    }, []);
-    react.useEffect(() => {
-      if (!childrenContainerRef.current) return;
-      const originalParentPointerEvents = childrenContainerRef.current.style.pointerEvents;
-      if (open && modal) {
-        childrenContainerRef.current.style.pointerEvents = "none";
+    }, [computedSize, initialSize, maxSize, minSize, side, style, type]);
+    const transitionClassNames = react.useMemo(() => {
+      switch (side) {
+        case "left":
+          return {
+            enter: "-ml-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-left] ml-0",
+            enterDone: "ml-0",
+            exitActive: "ease-linear duration-200 transition-[margin-left] -ml-(--slide-out-size)",
+            exitDone: "-ml-(--slide-out-size)"
+          };
+        case "right":
+          return {
+            enter: "-mr-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-right] mr-0",
+            enterDone: "mr-0",
+            exitActive: "ease-linear duration-200 transition-[margin-right] -mr-(--slide-out-size)",
+            exitDone: "-mr-(--slide-out-size)"
+          };
+        case "top":
+          return {
+            enter: "-mt-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-top] mt-0",
+            enterDone: "mt-0",
+            exitActive: "ease-linear duration-200 transition-[margin-top] -mt-(--slide-out-size)",
+            exitDone: "-mt-(--slide-out-size)"
+          };
+        case "bottom":
+          return {
+            enter: "-mb-(--slide-out-size)",
+            enterActive: "ease-linear duration-200 transition-[margin-bottom] mb-0",
+            enterDone: "mb-0",
+            exitActive: "ease-linear duration-200 transition-[margin-bottom] -mb-(--slide-out-size)",
+            exitDone: "-mb-(--slide-out-size)"
+          };
       }
-      return () => {
-        if (childrenContainerRef.current) {
-          childrenContainerRef.current.style.pointerEvents = originalParentPointerEvents;
-        }
-      };
-    }, [modal, open, parentContainer.style]);
-    const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
-    const CSSTransitionClassNames = react.useMemo(
+    }, [side]);
+    const contextValue = react.useMemo(
       () => ({
-        enter: isLeft ? "-ml-(--slide-out-width)" : "-mr-(--slide-out-width)",
-        enterActive: isLeft ? "ease-linear duration-200 transition-[margin-left] ml-0" : "ease-linear duration-200 transition-[margin-right] mr-0",
-        enterDone: isLeft ? "ml-0" : "mr-0",
-        exitActive: isLeft ? "ease-linear duration-200 transition-[margin-left] -ml-(--slide-out-width)" : "ease-linear duration-200 transition-[margin-right] -mr-(--slide-out-width)",
-        exitDone: isLeft ? "-ml-(--slide-out-width)" : "-mr-(--slide-out-width)"
+        side,
+        type,
+        resizeable,
+        computedSize,
+        setComputedSize
       }),
-      [isLeft]
+      [computedSize, resizeable, side, type]
     );
-    const handleMouseDown = react.useCallback((e) => {
-      const { clientX } = e;
-      prevClientX.current = clientX;
-      setIsResizing(true);
-    }, []);
-    const handleMouseMove = react.useCallback(
+    return !hide ? (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactTransitionGroup.CSSTransition,
+        {
+          classNames: transitionClassNames,
+          in: open,
+          timeout: TIMEOUT_DURATION,
+          unmountOnExit: true,
+          mountOnEnter: true,
+          nodeRef: internalRef,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: mergeRefs([ref, internalRef]),
+              onPointerDownCapture: handlePointerDownCapture,
+              "data-open": open,
+              "data-side": side,
+              "data-type": type,
+              style: computedStyle,
+              ...rest,
+              children: /* @__PURE__ */ jsxRuntime.jsx(SlideOutContextContext, { value: contextValue, children })
+            }
+          )
+        }
+      )
+    ) : null;
+  });
+  SlideOutContent.displayName = "SlideOutContent";
+  const SlideOutHandle = react.memo((props) => {
+    const { ref, onMouseDown, disabled, ...rest } = props;
+    const prevClientCoord = react.useRef(null);
+    const [isResizing, setIsResizing] = react.useState(false);
+    const { side, resizeable, computedSize, setComputedSize } = react.use(SlideOutContextContext);
+    const computedDisabled = disabled ?? !resizeable;
+    const setPrevClientCoord = react.useCallback(
+      (clientX, clientY) => {
+        switch (side) {
+          case "left":
+            prevClientCoord.current = clientX;
+            break;
+          case "right":
+            prevClientCoord.current = clientX;
+            break;
+          case "top":
+            prevClientCoord.current = clientY;
+            break;
+          case "bottom":
+            prevClientCoord.current = clientY;
+            break;
+        }
+      },
+      [side]
+    );
+    const handlePointerDown = react.useCallback(
       (e) => {
-        if (!isResizing) return;
-        const { clientX } = e;
-        const deltaX = (clientX - prevClientX.current) * (isLeft ? 1 : -1);
-        prevClientX.current = clientX;
-        setComputedWidth((prevWidth) => prevWidth + deltaX);
+        onMouseDown == null ? void 0 : onMouseDown(e);
+        if (e.defaultPrevented || computedDisabled) return;
+        e.preventDefault();
+        setPrevClientCoord(e.clientX, e.clientY);
+        setIsResizing(true);
       },
-      [isLeft, isResizing]
+      [computedDisabled, onMouseDown, setPrevClientCoord]
     );
-    const handleMouseUp = react.useCallback(() => {
-      if (!isResizing) return;
-      prevClientX.current = null;
+    const handlePointerMove = react.useCallback(
+      (e) => {
+        if (!isResizing || !prevClientCoord.current || computedDisabled) return;
+        e.preventDefault();
+        const { clientX, clientY } = e;
+        let delta = 0;
+        switch (side) {
+          case "left":
+            delta = clientX - prevClientCoord.current;
+            break;
+          case "right":
+            delta = (clientX - prevClientCoord.current) * -1;
+            break;
+          case "top":
+            delta = clientY - prevClientCoord.current;
+            break;
+          case "bottom":
+            delta = (clientY - prevClientCoord.current) * -1;
+            break;
+        }
+        setPrevClientCoord(clientX, clientY);
+        setComputedSize(computedSize + delta);
+      },
+      [computedDisabled, computedSize, isResizing, setComputedSize, setPrevClientCoord, side]
+    );
+    const handlePointerUp = react.useCallback(() => {
+      if (!isResizing || computedDisabled) return;
+      prevClientCoord.current = null;
       setIsResizing(false);
-    }, [isResizing]);
+    }, [computedDisabled, isResizing]);
     react.useEffect(() => {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("pointermove", handlePointerMove);
+      document.addEventListener("pointerup", handlePointerUp);
       return () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
+        document.removeEventListener("pointermove", handlePointerMove);
+        document.removeEventListener("pointerup", handlePointerUp);
       };
-    }, [handleMouseMove, handleMouseUp]);
-    react.useLayoutEffect(() => {
-      if (!open) return;
-      setComputedWidth(localRef.current.offsetWidth);
-    }, [open]);
-    const resizableStyle = react.useMemo(
-      () => ({
-        ...style,
-        width: computedWidth ?? initialWidth,
-        maxWidth,
-        minWidth,
-        position,
-        "--slide-out-width": `${computedWidth}${typeof computedWidth === "number" ? "px" : ""}`
-      }),
-      [computedWidth, initialWidth, maxWidth, minWidth, position, style]
-    );
-    const resizableEnable = react.useMemo(
-      () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
-      [isLeft, resizeable]
-    );
-    const SlideOut2 = react.useMemo(
-      () => (
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactTransitionGroup.CSSTransition,
-          {
-            classNames: CSSTransitionClassNames,
-            in: open,
-            timeout: TIMEOUT_DURATION,
-            unmountOnExit: true,
-            mountOnEnter: true,
-            onEntering: onOpening,
-            onExited: onClosed,
-            nodeRef,
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
-              {
-                className: classVarianceAuthority.cx(
-                  "top-0",
-                  "bottom-0",
-                  {
-                    "left-0": isLeft,
-                    "right-0": !isLeft,
-                    absolute: position === "absolute",
-                    relative: position === "relative"
-                  },
-                  className
-                ),
-                ref: mergedRefs,
-                onPointerDownCapture: handlePointerDownCapture,
-                "data-side": side,
-                style: resizableStyle,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "div",
-                    {
-                      className: classVarianceAuthority.cx("absolute top-0 bottom-0 w-[3px]", {
-                        "right-0": isLeft,
-                        "left-0": !isLeft,
-                        "pointer-events-none": !resizableEnable
-                      }),
-                      onMouseDown: handleMouseDown,
-                      "data-resizing": isResizing ? "" : void 0
-                    }
-                  ),
-                  content
-                ]
-              }
-            )
-          }
-        )
-      ),
-      [
-        CSSTransitionClassNames,
-        open,
-        onOpening,
-        onClosed,
-        className,
-        isLeft,
-        position,
-        mergedRefs,
-        handlePointerDownCapture,
-        side,
-        resizableStyle,
-        handleMouseDown,
-        isResizing,
-        resizableEnable,
-        content
-      ]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    }, [handlePointerMove, handlePointerUp]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: "relative flex h-full max-h-full w-full max-w-full overflow-hidden",
-        ref: handleAssignParentContainer,
-        ...otherProps,
-        children: [
-          side === "left" && !hide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            open && overlayComponent,
-            " ",
-            content && SlideOut2
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full max-w-full grow overflow-hidden", ref: childrenContainerRef, children }),
-          side === "right" && !hide && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            open && overlayComponent,
-            " ",
-            content && SlideOut2
-          ] })
-        ]
+        ref,
+        onPointerDown: handlePointerDown,
+        "data-resizing": isResizing,
+        "data-side": side,
+        "data-disabled": computedDisabled,
+        ...rest
       }
     );
   });
-  SlideOut.displayName = "SlideOut";
-  const DEFAULT_INITIAL_WIDTH = "30%";
-  const LayoutSlideOut = react.memo((props) => {
-    const { small, hideLayout, isOpen, setOpen } = useLayoutContext();
-    const {
-      ref,
-      id,
-      children,
-      className,
-      defaultOpen,
-      side,
-      initialWidth = DEFAULT_INITIAL_WIDTH,
-      onDismiss,
-      ...rest
-    } = props;
-    const open = isOpen(id);
-    react.useEffect(() => {
-      if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
-        setOpen(id, defaultOpen == null ? void 0 : defaultOpen.small);
-      } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
-        setOpen(id, defaultOpen == null ? void 0 : defaultOpen.large);
-      }
-    }, [defaultOpen, id, setOpen, small]);
-    const handleDismiss = react.useCallback(() => {
-      setOpen(id, false);
-      onDismiss == null ? void 0 : onDismiss();
-    }, [id, onDismiss, setOpen]);
-    return !hideLayout && /* @__PURE__ */ jsxRuntime.jsx(
-      SlideOut,
-      {
-        className: classVarianceAuthority.cx(`overmap-layout-slideOut-${side}`, className),
-        side,
-        ref,
+  SlideOutHandle.displayName = "SlideOutHandle";
+  const SlideOutOverlay = react.memo((props) => {
+    const { ref, ...rest } = props;
+    const { open } = react.use(SlideOutRootContext);
+    return open ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-open": open, ...rest }) : null;
+  });
+  SlideOutOverlay.displayName = "SlideOutOverlay";
+  const SlideOutRoot = react.memo((props) => {
+    const { ref, children, defaultOpen = false, open: controlledOpen, onOpenChange, modal = false, ...rest } = props;
+    const [parentElement, setParentElement] = react.useState(null);
+    const [open, setOpen] = useControlledState(defaultOpen, controlledOpen, onOpenChange);
+    const contextValue = react.useMemo(
+      () => ({
+        parentElement,
         open,
-        initialWidth,
-        modal: small,
-        onDismiss: handleDismiss,
-        position: small ? "absolute" : "relative",
-        ...rest,
-        children
-      }
+        setOpen,
+        modal
+      }),
+      [modal, open, parentElement, setOpen]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergeRefs([ref, setParentElement]), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(SlideOutRootContext, { value: contextValue, children }) });
+  });
+  SlideOutRoot.displayName = "SlideOutRoot";
+  const SlideOutTrigger = react.memo((props) => {
+    const { ref, onClick, ...rest } = props;
+    const { open, setOpen } = react.use(SlideOutRootContext);
+    const handleClick = react.useCallback(
+      (e) => {
+        onClick == null ? void 0 : onClick(e);
+        if (e.defaultPrevented) return;
+        setOpen(!open);
+      },
+      [onClick, open, setOpen]
     );
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, onClick: handleClick, "data-disabled": props.disabled ?? false, ...rest });
+  });
+  SlideOutTrigger.displayName = "SlideOutTrigger";
+  const SlideOutViewport = react.memo((props) => {
+    const { ref, ...rest } = props;
+    const internalRef = react.useRef(null);
+    const { open, modal, parentElement } = react.use(SlideOutRootContext);
+    react.useEffect(() => {
+      if (!internalRef.current) return;
+      const internalElement = internalRef.current;
+      const originalParentPointerEvents = internalElement.style.pointerEvents;
+      if (open && modal) {
+        internalElement.style.pointerEvents = "none";
+      }
+      return () => {
+        internalElement.style.pointerEvents = originalParentPointerEvents;
+      };
+    }, [modal, open, parentElement == null ? void 0 : parentElement.style]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mergeRefs([ref, internalRef]), ...rest });
+  });
+  SlideOutViewport.displayName = "SlideOutViewport";
+  const SlideOut = {
+    Close: SlideOutClose,
+    Content: SlideOutContent,
+    Handle: SlideOutHandle,
+    Overlay: SlideOutOverlay,
+    Root: SlideOutRoot,
+    Trigger: SlideOutTrigger,
+    Viewport: SlideOutViewport
+  };
+  const LayoutSlideOutClose = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutClose, { ref, ...rest });
+  });
+  LayoutSlideOutClose.displayName = "LayoutSlideOutClose";
+  const LayoutSlideOutContent = react.memo((props) => {
+    const { ref, type, hide, ...rest } = props;
+    const { small, hideLayout } = react.use(LayoutContext);
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutContent, { ref, type: type ?? (small ? "overlay" : "inline"), hide: hide ?? hideLayout, ...rest });
   });
-  LayoutSlideOut.displayName = "LayoutSlideOut";
+  LayoutSlideOutContent.displayName = "LayoutSlideOutContent";
+  const LayoutSlideOutHandle = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutHandle, { ref, ...rest });
+  });
+  LayoutSlideOutHandle.displayName = "LayoutSlideOutHandle";
   const LayoutSlideOutOverlay = react.memo((props) => {
-    const { ref, children, className, active, slideOutId, smallModeOnly = false, ...rest } = props;
-    const { small, hideLayout, isOpen } = useLayoutContext();
+    const { ref, smallModeOnly = false, ...rest } = props;
+    const { small, hideLayout } = useLayoutContext();
     const showOverlay = react.useMemo(() => {
-      if (active !== void 0) return active;
       if (hideLayout) return false;
       if (smallModeOnly && !small) return false;
-      return isOpen(slideOutId);
-    }, [active, hideLayout, isOpen, slideOutId, small, smallModeOnly]);
-    return showOverlay && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classVarianceAuthority.cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest, children });
+      return true;
+    }, [hideLayout, small, smallModeOnly]);
+    return showOverlay ? /* @__PURE__ */ jsxRuntime.jsx(SlideOutOverlay, { ref, ...rest }) : null;
   });
   LayoutSlideOutOverlay.displayName = "SlideOutOverlay";
-  function nextStateBasedOnType(open, type) {
-    switch (type) {
-      case "toggle":
-        return !open;
-      case "open":
-        return true;
-      case "close":
-        return false;
-    }
-  }
+  const LayoutSlideOutRoot = react.memo((props) => {
+    const { ref, slideOutId, defaultOpen, ...rest } = props;
+    const { isOpen, setOpen, small } = react.use(LayoutContext);
+    const open = isOpen(slideOutId);
+    const handleOpenChange = react.useCallback(
+      (open2) => {
+        if (!open2) setOpen(slideOutId, false);
+      },
+      [setOpen, slideOutId]
+    );
+    react.useEffect(() => {
+      if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
+        setOpen(slideOutId, defaultOpen == null ? void 0 : defaultOpen.small);
+      } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
+        setOpen(slideOutId, defaultOpen == null ? void 0 : defaultOpen.large);
+      }
+    }, [defaultOpen, slideOutId, setOpen, small]);
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutRoot, { ref, open, onOpenChange: handleOpenChange, modal: small, ...rest });
+  });
+  LayoutSlideOutRoot.displayName = "LayoutSlideOutRoot";
   const LayoutSlideOutTrigger = react.memo((props) => {
-    const { ref, slideOutId, type = "toggle", children, ...rest } = props;
+    const { ref, slideOutId, children, ...rest } = props;
     const { isOpen, setOpen } = useLayoutContext();
     const open = isOpen(slideOutId);
     const handleClick = react.useCallback(() => {
-      setOpen(slideOutId, nextStateBasedOnType(open, type));
-    }, [open, setOpen, slideOutId, type]);
+      setOpen(slideOutId, !open);
+    }, [open, setOpen, slideOutId]);
     return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...rest, children });
   });
-  LayoutSlideOutTrigger.displayName = "SlideOutTrigger";
+  LayoutSlideOutTrigger.displayName = "LayoutSlideOutTrigger";
+  const LayoutSlideOutViewport = react.memo((props) => {
+    const { ref, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(SlideOutViewport, { ref, ...rest });
+  });
+  LayoutSlideOutViewport.displayName = "LayoutSlideOutViewport";
   const Layout = {
     Root: LayoutRoot,
     Container: LayoutContainer,
+    SlideOutClose: LayoutSlideOutClose,
+    SlideOutContent: LayoutSlideOutContent,
+    SlideOutHandle: LayoutSlideOutHandle,
     SlideOutOverlay: LayoutSlideOutOverlay,
-    SlideOut: LayoutSlideOut,
-    SlideOutTrigger: LayoutSlideOutTrigger
+    SlideOutRoot: LayoutSlideOutRoot,
+    SlideOutTrigger: LayoutSlideOutTrigger,
+    SlideOutViewport: LayoutSlideOutViewport
   };
   const linkCva = classVarianceAuthority.cva(["cursor-pointer"], {
     variants: {
@@ -4357,9 +4453,9 @@
     }, [onRetry, resetBoundary]);
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-2", style: outerFlexStyles, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } }),
-      /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
+      /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.AlertTriangle, size: height, style: centerStyles }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { lineHeight: height, ...centerStyles }, children: message }),
-      /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "rotate-ccw", size: height }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.RotateCcw, size: height }) }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 } })
     ] });
   });
@@ -4385,95 +4481,6 @@
     );
   });
   OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
-  const PhoneNumberInputContext = react.createContext({});
-  const FlagComponent = react.memo((props) => {
-    const { country } = props;
-    return country ? country : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PhoneIcon, { size: 16 });
-  });
-  FlagComponent.displayName = "FlagComponent";
-  const CountrySelect = react.memo((props) => {
-    const { disabled, value, onChange, options } = props;
-    const { radius, size, variant, accentColor } = react.use(PhoneNumberInputContext);
-    const handleSelect = react.useCallback(
-      (e) => {
-        onChange(e.target.value);
-      },
-      [onChange]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        className: "relative",
-        accentColor,
-        radius,
-        size,
-        variant,
-        disabled,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { size: 16, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "select",
-            {
-              disabled,
-              value,
-              onChange: handleSelect,
-              className: "absolute inset-0 text-sm opacity-0",
-              "aria-label": "Select country",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select a country" }, "default"),
-                options.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: option.value, children: [
-                  option.label,
-                  " ",
-                  option.value && `+${min.getCountryCallingCode(option.value)}`
-                ] }, option.value ?? `empty-${i}`))
-              ]
-            }
-          )
-        ]
-      }
-    );
-  });
-  CountrySelect.displayName = "CountrySelect";
-  const InputComponent = react.memo((props) => {
-    const { accentColor, radius, size, variant } = react.use(PhoneNumberInputContext);
-    return /* @__PURE__ */ jsxRuntime.jsx(Input.Root, { variant, size, radius, accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(Input.Field, { ...props }) });
-  });
-  InputComponent.displayName = "InputComponent";
-  const PhoneNumberInput = react.memo((props) => {
-    const providerContext = useProvider();
-    const {
-      ref,
-      className,
-      size = "md",
-      variant = "outline",
-      radius = providerContext.radius,
-      accentColor = providerContext.accentColor,
-      ...rest
-    } = props;
-    const contextValue = react.useMemo(
-      () => ({
-        size,
-        variant,
-        radius,
-        accentColor
-      }),
-      [accentColor, radius, size, variant]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsx(PhoneNumberInputContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
-      PhoneInput,
-      {
-        ref,
-        className: classVarianceAuthority.cx(className, "flex gap-1"),
-        flagComponent: FlagComponent,
-        countrySelectComponent: CountrySelect,
-        inputComponent: InputComponent,
-        "data-accent-color": accentColor,
-        ...rest
-      }
-    ) });
-  });
-  PhoneNumberInput.displayName = "PhoneNumberInput";
   const PopoverArrow = react.memo((props) => {
     const { ref, children, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Arrow, { className: classVarianceAuthority.cx("fill-(--base-6)", className), ref, ...rest, children });
@@ -6124,7 +6131,7 @@
               action && /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Action, { className: "w-max", altText: action.altText, asChild: true, children: action.content })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { size, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: "x" }) }) })
+          /* @__PURE__ */ jsxRuntime.jsx(RadixToast__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(IconButton, { size, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsxRuntime.jsx(LuIcon, { icon: lucideReact.X }) }) })
         ]
       }
     );
@@ -6672,10 +6679,12 @@
   exports2.InputSlot = InputSlot;
   exports2.Layout = Layout;
   exports2.LayoutContainer = LayoutContainer;
-  exports2.LayoutContext = LayoutContext;
   exports2.LayoutRoot = LayoutRoot;
-  exports2.LayoutSlideOut = LayoutSlideOut;
+  exports2.LayoutSlideOutClose = LayoutSlideOutClose;
+  exports2.LayoutSlideOutContent = LayoutSlideOutContent;
+  exports2.LayoutSlideOutHandle = LayoutSlideOutHandle;
   exports2.LayoutSlideOutOverlay = LayoutSlideOutOverlay;
+  exports2.LayoutSlideOutRoot = LayoutSlideOutRoot;
   exports2.LayoutSlideOutTrigger = LayoutSlideOutTrigger;
   exports2.Link = Link;
   exports2.LuIcon = LuIcon;
@@ -6736,7 +6745,6 @@
   exports2.OverlayTitle = OverlayTitle;
   exports2.OverlayTrigger = OverlayTrigger;
   exports2.OvermapErrorBoundary = OvermapErrorBoundary;
-  exports2.PhoneNumberInput = PhoneNumberInput;
   exports2.Popover = Popover;
   exports2.PopoverArrow = PopoverArrow;
   exports2.PopoverContent = PopoverContent;
@@ -6762,6 +6770,13 @@
   exports2.SegmentedTabsTrigger = SegmentedTabsTrigger;
   exports2.Separator = Separator;
   exports2.SlideOut = SlideOut;
+  exports2.SlideOutClose = SlideOutClose;
+  exports2.SlideOutContent = SlideOutContent;
+  exports2.SlideOutHandle = SlideOutHandle;
+  exports2.SlideOutOverlay = SlideOutOverlay;
+  exports2.SlideOutRoot = SlideOutRoot;
+  exports2.SlideOutTrigger = SlideOutTrigger;
+  exports2.SlideOutViewport = SlideOutViewport;
   exports2.Slider = Slider;
   exports2.Spinner = Spinner;
   exports2.Switch = Switch;