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

package/dist/blocks.js

@@ -1,5 +1,5 @@
 import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { cva, cx } from "class-variance-authority";
 import { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useId, useLayoutEffect, use, useRef } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
@@ -9,18 +9,16 @@ import { CommandItem, CommandRoot, CommandEmpty, CommandGroup, CommandInput, use
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { DialogPortal, DialogContent as DialogContent$1, DialogTitle, DialogDescription, DialogOverlay as DialogOverlay$1, DialogTrigger } from "@radix-ui/react-dialog";
 import { DayPicker as DayPicker$1 } from "react-day-picker";
-import { DynamicIcon } from "lucide-react/dynamic";
+import { ChevronRight, ChevronLeft, ChevronDown, ChevronUp, AlertTriangle, RotateCcw, X } from "lucide-react";
 import * as RadixHoverCard from "@radix-ui/react-hover-card";
+import { Slot } from "@radix-ui/react-slot";
 import { CSSTransition } from "react-transition-group";
+import "react-transition-group/CSSTransition";
 import ReactDOM from "react-dom";
-import { Slot } from "@radix-ui/react-slot";
 import { useListItem, useMergeRefs, FloatingNode, FloatingPortal, FloatingOverlay, FloatingFocusManager, FloatingList, useFloatingNodeId, useFloating, offset, size, flip, shift, hide, autoUpdate, useRole, useDismiss, useClick, useListNavigation, useInteractions, FloatingTree, useHover, safePolygon } from "@floating-ui/react";
 import * as RadixSeparator from "@radix-ui/react-separator";
 import * as RadixOneTimePasswordField from "@radix-ui/react-one-time-password-field";
 import { useErrorBoundary, ErrorBoundary } from "react-error-boundary";
-import PhoneInput from "react-phone-number-input";
-import { PhoneIcon, ChevronDownIcon } from "lucide-react";
-import { getCountryCallingCode } from "react-phone-number-input/min";
 import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixProgress from "@radix-ui/react-progress";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
@@ -1652,21 +1650,21 @@ const CommandMenu = {
   PageTriggerItem: CommandMenuPageTriggerItem
 };
 const LuIcon = memo((props) => {
-  const { ref, icon, className, size: size2 = "1em", ...rest } = props;
-  return /* @__PURE__ */ jsx(DynamicIcon, { ref, className: cx("shrink-0", className), size: size2, name: icon, ...rest });
+  const { ref, icon: Icon, className, size: size2 = "1em", ...rest } = props;
+  return /* @__PURE__ */ jsx(Icon, { ref, className: cx("shrink-0", className), size: size2, ...rest });
 });
 LuIcon.displayName = "LuIcon";
 const Chevron = (props) => {
   const { orientation, ...rest } = props;
   switch (orientation) {
     case "up":
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-up", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronUp, ...rest });
     case "down":
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-down", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronDown, ...rest });
     case "left":
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-left", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronLeft, ...rest });
     default:
-      return /* @__PURE__ */ jsx(LuIcon, { icon: "chevron-right", ...rest });
+      return /* @__PURE__ */ jsx(LuIcon, { icon: ChevronRight, ...rest });
   }
 };
 const rootCva = cva(["relative", "size-max"], {
@@ -2231,9 +2229,9 @@ const Input = {
 const LayoutContext = createContext({});
 const useLayoutContext = () => useContext(LayoutContext);
 const LayoutContainer = memo((props) => {
-  const { ref, children, className, ...rest } = props;
+  const { ref, children, ...rest } = props;
   const { hideLayout = false } = useLayoutContext();
-  return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx("flex h-full grow", className), ref, ...rest, children });
+  return !hideLayout && /* @__PURE__ */ jsx("div", { ref, ...rest, children });
 });
 LayoutContainer.displayName = "LayoutContainer";
 const LayoutRoot = memo((props) => {
@@ -2260,6 +2258,23 @@ const LayoutRoot = memo((props) => {
   return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children });
 });
 LayoutRoot.displayName = "LayoutRoot";
+const SlideOutRootContext = createContext({});
+const SlideOutContextContext = createContext({});
+const SlideOutClose = memo((props) => {
+  const { ref, onClick, disabled, ...rest } = props;
+  const { setOpen } = use(SlideOutRootContext);
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      setOpen(false);
+    },
+    [onClick, setOpen]
+  );
+  return /* @__PURE__ */ jsx(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 = useRef(false);
@@ -2321,293 +2336,372 @@ function useCallbackRef(callback) {
     return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
   }, []);
 }
-const TIMEOUT_DURATION = 200;
-const SlideOut = memo((props) => {
-  const {
-    ref,
-    children,
-    className,
-    style,
-    open,
-    hide: hide2 = 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] = useState(document.body);
-  const childrenContainerRef = useRef(null);
-  const localRef = useRef(null);
-  const nodeRef = useRef(null);
-  const mergedRefs = mergeRefs([ref, localRef, nodeRef]);
-  const [isResizing, setIsResizing] = useState(false);
-  const [computedWidth, setComputedWidth] = useState(null);
-  const prevClientX = useRef(null);
-  const handleDismiss = useCallback(() => {
-    if (modal && onDismiss) {
-      onDismiss();
-    }
-  }, [modal, onDismiss]);
-  const handleAssignParentContainer = useCallback((element) => {
-    if (element) {
-      setParentContainer(element);
+const SlideOutContent = memo((props) => {
+  const { ref, children, style, side, type, resizeable = false, initialSize, minSize, maxSize, hide: hide2, ...rest } = props;
+  const internalRef = useRef(null);
+  const { open, setOpen, parentElement, modal } = use(SlideOutRootContext);
+  const [computedSize, setComputedSize] = useState(null);
+  const handleClose = useCallback(() => {
+    if (modal) setOpen(false);
+  }, [modal, setOpen]);
+  const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(
+    handleClose,
+    parentElement ?? void 0
+  );
+  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 = 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`
+        };
     }
-  }, []);
-  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 = 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 = useMemo(
+  }, [side]);
+  const contextValue = 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 = useCallback((e) => {
-    const { clientX } = e;
-    prevClientX.current = clientX;
-    setIsResizing(true);
-  }, []);
-  const handleMouseMove = useCallback(
+  return !hide2 ? (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    /* @__PURE__ */ jsx(
+      CSSTransition,
+      {
+        classNames: transitionClassNames,
+        in: open,
+        timeout: TIMEOUT_DURATION,
+        unmountOnExit: true,
+        mountOnEnter: true,
+        nodeRef: internalRef,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: mergeRefs([ref, internalRef]),
+            onPointerDownCapture: handlePointerDownCapture,
+            "data-open": open,
+            "data-side": side,
+            "data-type": type,
+            style: computedStyle,
+            ...rest,
+            children: /* @__PURE__ */ jsx(SlideOutContextContext, { value: contextValue, children })
+          }
+        )
+      }
+    )
+  ) : null;
+});
+SlideOutContent.displayName = "SlideOutContent";
+const SlideOutHandle = memo((props) => {
+  const { ref, onMouseDown, disabled, ...rest } = props;
+  const prevClientCoord = useRef(null);
+  const [isResizing, setIsResizing] = useState(false);
+  const { side, resizeable, computedSize, setComputedSize } = use(SlideOutContextContext);
+  const computedDisabled = disabled ?? !resizeable;
+  const setPrevClientCoord = 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 = 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 = useCallback(() => {
-    if (!isResizing) return;
-    prevClientX.current = null;
+  const handlePointerMove = 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 = useCallback(() => {
+    if (!isResizing || computedDisabled) return;
+    prevClientCoord.current = null;
     setIsResizing(false);
-  }, [isResizing]);
+  }, [computedDisabled, isResizing]);
   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]);
-  useLayoutEffect(() => {
-    if (!open) return;
-    setComputedWidth(localRef.current.offsetWidth);
-  }, [open]);
-  const resizableStyle = useMemo(
-    () => ({
-      ...style,
-      width: computedWidth ?? initialWidth,
-      maxWidth,
-      minWidth,
-      position,
-      "--slide-out-width": `${computedWidth}${typeof computedWidth === "number" ? "px" : ""}`
-    }),
-    [computedWidth, initialWidth, maxWidth, minWidth, position, style]
-  );
-  const resizableEnable = useMemo(
-    () => ({ left: resizeable && !isLeft, right: resizeable && isLeft }),
-    [isLeft, resizeable]
-  );
-  const SlideOut2 = useMemo(
-    () => (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      /* @__PURE__ */ jsx(
-        CSSTransition,
-        {
-          classNames: CSSTransitionClassNames,
-          in: open,
-          timeout: TIMEOUT_DURATION,
-          unmountOnExit: true,
-          mountOnEnter: true,
-          onEntering: onOpening,
-          onExited: onClosed,
-          nodeRef,
-          children: /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: 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__ */ jsx(
-                  "div",
-                  {
-                    className: 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__ */ jsxs(
+  }, [handlePointerMove, handlePointerUp]);
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "relative flex h-full max-h-full w-full max-w-full overflow-hidden",
-      ref: handleAssignParentContainer,
-      ...otherProps,
-      children: [
-        side === "left" && !hide2 && /* @__PURE__ */ jsxs(Fragment, { children: [
-          open && overlayComponent,
-          " ",
-          content && SlideOut2
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex h-full max-w-full grow overflow-hidden", ref: childrenContainerRef, children }),
-        side === "right" && !hide2 && /* @__PURE__ */ jsxs(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 = 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);
-  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 = useCallback(() => {
-    setOpen(id, false);
-    onDismiss == null ? void 0 : onDismiss();
-  }, [id, onDismiss, setOpen]);
-  return !hideLayout && /* @__PURE__ */ jsx(
-    SlideOut,
-    {
-      className: cx(`overmap-layout-slideOut-${side}`, className),
-      side,
-      ref,
+SlideOutHandle.displayName = "SlideOutHandle";
+const SlideOutOverlay = memo((props) => {
+  const { ref, ...rest } = props;
+  const { open } = use(SlideOutRootContext);
+  return open ? /* @__PURE__ */ jsx("div", { ref, "data-open": open, ...rest }) : null;
+});
+SlideOutOverlay.displayName = "SlideOutOverlay";
+const SlideOutRoot = memo((props) => {
+  const { ref, children, defaultOpen = false, open: controlledOpen, onOpenChange, modal = false, ...rest } = props;
+  const [parentElement, setParentElement] = useState(null);
+  const [open, setOpen] = useControlledState(defaultOpen, controlledOpen, onOpenChange);
+  const contextValue = useMemo(
+    () => ({
+      parentElement,
       open,
-      initialWidth,
-      modal: small,
-      onDismiss: handleDismiss,
-      position: small ? "absolute" : "relative",
-      ...rest,
-      children
-    }
+      setOpen,
+      modal
+    }),
+    [modal, open, parentElement, setOpen]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: mergeRefs([ref, setParentElement]), ...rest, children: /* @__PURE__ */ jsx(SlideOutRootContext, { value: contextValue, children }) });
+});
+SlideOutRoot.displayName = "SlideOutRoot";
+const SlideOutTrigger = memo((props) => {
+  const { ref, onClick, ...rest } = props;
+  const { open, setOpen } = use(SlideOutRootContext);
+  const handleClick = useCallback(
+    (e) => {
+      onClick == null ? void 0 : onClick(e);
+      if (e.defaultPrevented) return;
+      setOpen(!open);
+    },
+    [onClick, open, setOpen]
   );
+  return /* @__PURE__ */ jsx(Slot, { ref, onClick: handleClick, "data-disabled": props.disabled ?? false, ...rest });
+});
+SlideOutTrigger.displayName = "SlideOutTrigger";
+const SlideOutViewport = memo((props) => {
+  const { ref, ...rest } = props;
+  const internalRef = useRef(null);
+  const { open, modal, parentElement } = use(SlideOutRootContext);
+  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__ */ 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 = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(SlideOutClose, { ref, ...rest });
 });
-LayoutSlideOut.displayName = "LayoutSlideOut";
+LayoutSlideOutClose.displayName = "LayoutSlideOutClose";
+const LayoutSlideOutContent = memo((props) => {
+  const { ref, type, hide: hide2, ...rest } = props;
+  const { small, hideLayout } = use(LayoutContext);
+  return /* @__PURE__ */ jsx(SlideOutContent, { ref, type: type ?? (small ? "overlay" : "inline"), hide: hide2 ?? hideLayout, ...rest });
+});
+LayoutSlideOutContent.displayName = "LayoutSlideOutContent";
+const LayoutSlideOutHandle = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ jsx(SlideOutHandle, { ref, ...rest });
+});
+LayoutSlideOutHandle.displayName = "LayoutSlideOutHandle";
 const LayoutSlideOutOverlay = 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 = 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__ */ jsx("div", { className: cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest, children });
+    return true;
+  }, [hideLayout, small, smallModeOnly]);
+  return showOverlay ? /* @__PURE__ */ 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 = memo((props) => {
+  const { ref, slideOutId, defaultOpen, ...rest } = props;
+  const { isOpen, setOpen, small } = use(LayoutContext);
+  const open = isOpen(slideOutId);
+  const handleOpenChange = useCallback(
+    (open2) => {
+      if (!open2) setOpen(slideOutId, false);
+    },
+    [setOpen, slideOutId]
+  );
+  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__ */ jsx(SlideOutRoot, { ref, open, onOpenChange: handleOpenChange, modal: small, ...rest });
+});
+LayoutSlideOutRoot.displayName = "LayoutSlideOutRoot";
 const LayoutSlideOutTrigger = 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 = useCallback(() => {
-    setOpen(slideOutId, nextStateBasedOnType(open, type));
-  }, [open, setOpen, slideOutId, type]);
+    setOpen(slideOutId, !open);
+  }, [open, setOpen, slideOutId]);
   return /* @__PURE__ */ jsx(Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...rest, children });
 });
-LayoutSlideOutTrigger.displayName = "SlideOutTrigger";
+LayoutSlideOutTrigger.displayName = "LayoutSlideOutTrigger";
+const LayoutSlideOutViewport = memo((props) => {
+  const { ref, ...rest } = props;
+  return /* @__PURE__ */ 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 = cva(["cursor-pointer"], {
   variants: {
@@ -4354,9 +4448,9 @@ const ErrorFallback = memo((props) => {
   }, [onRetry, resetBoundary]);
   return /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2", style: outerFlexStyles, children: [
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
-    /* @__PURE__ */ jsx(LuIcon, { icon: "alert-triangle", size: height, style: centerStyles }),
+    /* @__PURE__ */ jsx(LuIcon, { icon: AlertTriangle, size: height, style: centerStyles }),
     /* @__PURE__ */ jsx("span", { style: { lineHeight: height, ...centerStyles }, children: message }),
-    /* @__PURE__ */ jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsx(LuIcon, { icon: "rotate-ccw", size: height }) }),
+    /* @__PURE__ */ jsx(IconButton, { "aria-label": "Try again", variant: "soft", onClick: handleRetry, style: centerStyles, children: /* @__PURE__ */ jsx(LuIcon, { icon: RotateCcw, size: height }) }),
     /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } })
   ] });
 });
@@ -4382,95 +4476,6 @@ const OvermapErrorBoundary = memo((props) => {
   );
 });
 OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
-const PhoneNumberInputContext = createContext({});
-const FlagComponent = memo((props) => {
-  const { country } = props;
-  return country ? country : /* @__PURE__ */ jsx(PhoneIcon, { size: 16 });
-});
-FlagComponent.displayName = "FlagComponent";
-const CountrySelect = memo((props) => {
-  const { disabled, value, onChange, options } = props;
-  const { radius, size: size2, variant, accentColor } = use(PhoneNumberInputContext);
-  const handleSelect = useCallback(
-    (e) => {
-      onChange(e.target.value);
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsxs(
-    Button,
-    {
-      className: "relative",
-      accentColor,
-      radius,
-      size: size2,
-      variant,
-      disabled,
-      children: [
-        /* @__PURE__ */ jsx(FlagComponent, { country: value, countryName: value, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxs(
-          "select",
-          {
-            disabled,
-            value,
-            onChange: handleSelect,
-            className: "absolute inset-0 text-sm opacity-0",
-            "aria-label": "Select country",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Select a country" }, "default"),
-              options.filter((x) => x.value).map((option, i) => /* @__PURE__ */ jsxs("option", { value: option.value, children: [
-                option.label,
-                " ",
-                option.value && `+${getCountryCallingCode(option.value)}`
-              ] }, option.value ?? `empty-${i}`))
-            ]
-          }
-        )
-      ]
-    }
-  );
-});
-CountrySelect.displayName = "CountrySelect";
-const InputComponent = memo((props) => {
-  const { accentColor, radius, size: size2, variant } = use(PhoneNumberInputContext);
-  return /* @__PURE__ */ jsx(Input.Root, { variant, size: size2, radius, accentColor, children: /* @__PURE__ */ jsx(Input.Field, { ...props }) });
-});
-InputComponent.displayName = "InputComponent";
-const PhoneNumberInput = memo((props) => {
-  const providerContext = useProvider();
-  const {
-    ref,
-    className,
-    size: size2 = "md",
-    variant = "outline",
-    radius = providerContext.radius,
-    accentColor = providerContext.accentColor,
-    ...rest
-  } = props;
-  const contextValue = useMemo(
-    () => ({
-      size: size2,
-      variant,
-      radius,
-      accentColor
-    }),
-    [accentColor, radius, size2, variant]
-  );
-  return /* @__PURE__ */ jsx(PhoneNumberInputContext, { value: contextValue, children: /* @__PURE__ */ jsx(
-    PhoneInput,
-    {
-      ref,
-      className: cx(className, "flex gap-1"),
-      flagComponent: FlagComponent,
-      countrySelectComponent: CountrySelect,
-      inputComponent: InputComponent,
-      "data-accent-color": accentColor,
-      ...rest
-    }
-  ) });
-});
-PhoneNumberInput.displayName = "PhoneNumberInput";
 const PopoverArrow = memo((props) => {
   const { ref, children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest, children });
@@ -6121,7 +6126,7 @@ const _Toast = function Toast2(props) {
             action && /* @__PURE__ */ jsx(RadixToast.Action, { className: "w-max", altText: action.altText, asChild: true, children: action.content })
           ] })
         ] }),
-        /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: size2, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsx(LuIcon, { icon: "x" }) }) })
+        /* @__PURE__ */ jsx(RadixToast.Close, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { size: size2, "aria-label": "Close", variant: "ghost", accentColor, children: /* @__PURE__ */ jsx(LuIcon, { icon: X }) }) })
       ]
     }
   );
@@ -6670,10 +6675,12 @@ export {
   InputSlot,
   Layout,
   LayoutContainer,
-  LayoutContext,
   LayoutRoot,
-  LayoutSlideOut,
+  LayoutSlideOutClose,
+  LayoutSlideOutContent,
+  LayoutSlideOutHandle,
   LayoutSlideOutOverlay,
+  LayoutSlideOutRoot,
   LayoutSlideOutTrigger,
   Link,
   LuIcon,
@@ -6734,7 +6741,6 @@ export {
   OverlayTitle,
   OverlayTrigger,
   OvermapErrorBoundary,
-  PhoneNumberInput,
   Popover,
   PopoverArrow,
   PopoverContent,
@@ -6760,6 +6766,13 @@ export {
   SegmentedTabsTrigger,
   Separator,
   SlideOut,
+  SlideOutClose,
+  SlideOutContent,
+  SlideOutHandle,
+  SlideOutOverlay,
+  SlideOutRoot,
+  SlideOutTrigger,
+  SlideOutViewport,
   Slider,
   Spinner,
   Switch,