@overmap-ai/blocks 1.0.38 → 1.0.39-alpha.1

package/dist/blocks.js

@@ -2,7 +2,7 @@ import * as RadixAlertDialog from "@radix-ui/react-alert-dialog";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { cva, cx } from "class-variance-authority";
 import * as React from "react";
-import React__default, { createContext, useContext, useMemo, forwardRef, memo, useState, useCallback, useEffect, useLayoutEffect, use, useRef } from "react";
+import React__default, { createContext, useContext, memo, useMemo, useState, useCallback, useEffect, useLayoutEffect, use, useRef } from "react";
 import * as RadixAvatar from "@radix-ui/react-avatar";
 import * as RadixCheckbox from "@radix-ui/react-checkbox";
 import { useMediaQuery } from "react-responsive";
@@ -106,7 +106,7 @@ const useProvider = () => {
   }
   return context;
 };
-const Provider = (props) => {
+const Provider = memo((props) => {
   const { accentColor, radius = "md", children } = props;
   const contextValue = useMemo(
     () => ({
@@ -116,7 +116,8 @@ const Provider = (props) => {
     [accentColor, radius]
   );
   return /* @__PURE__ */ jsx(ProviderContext.Provider, { value: contextValue, children });
-};
+});
+Provider.displayName = "Provider";
 const dialogOverlay = cva([
   "fixed",
   "inset-0",
@@ -174,9 +175,9 @@ const dialogContent = cva(
     }
   }
 );
-const AlertDialogContent = forwardRef((props, ref) => {
+const AlertDialogContent = memo((props) => {
   const { radius } = useProvider();
-  const { className, size: size2, container, ...rest } = props;
+  const { ref, children, className, size: size2, container, ...rest } = props;
   return /* @__PURE__ */ jsxs(RadixAlertDialog.Portal, { container, children: [
     /* @__PURE__ */ jsx(RadixAlertDialog.Overlay, { className: dialogOverlay({}), "data-floating-content": "" }),
     /* @__PURE__ */ jsx(
@@ -185,7 +186,8 @@ const AlertDialogContent = forwardRef((props, ref) => {
         className: cx(dialogContent({ size: size2 }), radiusCva({ radius, maxLarge: true }), className),
         ref,
         "data-floating-content": "",
-        ...rest
+        ...rest,
+        children
       }
     )
   ] });
@@ -202,7 +204,7 @@ const useAlertDialog = () => {
   return alertDialogContext;
 };
 const ButtonGroupContext = createContext({});
-const ButtonGroup = (props) => {
+const ButtonGroup = memo((props) => {
   const providerContext = useProvider();
   const {
     children,
@@ -222,7 +224,7 @@ const ButtonGroup = (props) => {
     [accentColor, radius, size2, variant]
   );
   return /* @__PURE__ */ jsx("div", { ...rest, children: /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value, children }) });
-};
+});
 ButtonGroup.displayName = "Buttons";
 const useButtonGroup = () => useContext(ButtonGroupContext);
 const buttonCva = cva(
@@ -378,65 +380,57 @@ const buttonCva = cva(
     }
   }
 );
-const Button = memo(
-  forwardRef((props, ref) => {
-    const providerContext = useProvider();
-    const buttonsContext = useButtonGroup();
-    const {
-      children,
-      className,
-      variant = buttonsContext.variant,
-      size: size2 = buttonsContext.size,
-      radius = buttonsContext.radius ?? providerContext.radius,
-      accentColor = buttonsContext.accentColor ?? providerContext.accentColor,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cx(
-          buttonCva({ size: size2, icon: false, variant }),
-          radiusCva({ radius, maxLarge: false }),
-          className
-        ),
-        ref,
-        "data-accent-color": accentColor,
-        ...rest,
-        children
-      }
-    );
-  })
-);
-const IconButton = memo(
-  forwardRef((props, ref) => {
-    const providerContext = useProvider();
-    const buttonsContext = useButtonGroup();
-    const {
-      children,
-      className,
-      variant = buttonsContext.variant,
-      size: size2 = buttonsContext.size,
-      radius = buttonsContext.radius ?? providerContext.radius,
-      accentColor = buttonsContext.accentColor ?? providerContext.accentColor,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: cx(
-          buttonCva({ size: size2, icon: true, variant }),
-          radiusCva({ radius, maxLarge: false }),
-          className
-        ),
-        ref,
-        "data-accent-color": accentColor,
-        ...rest,
-        children
-      }
-    );
-  })
-);
-const AlertDialogProvider = (props) => {
+const Button = memo((props) => {
+  const providerContext = useProvider();
+  const buttonsContext = useButtonGroup();
+  const {
+    ref,
+    children,
+    className,
+    variant = buttonsContext.variant,
+    size: size2 = buttonsContext.size,
+    radius = buttonsContext.radius ?? providerContext.radius,
+    accentColor = buttonsContext.accentColor ?? providerContext.accentColor,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cx(buttonCva({ size: size2, icon: false, variant }), radiusCva({ radius, maxLarge: false }), className),
+      ref,
+      "data-accent-color": accentColor,
+      ...rest,
+      children
+    }
+  );
+});
+Button.displayName = "Button";
+const IconButton = memo((props) => {
+  const providerContext = useProvider();
+  const buttonsContext = useButtonGroup();
+  const {
+    ref,
+    children,
+    className,
+    variant = buttonsContext.variant,
+    size: size2 = buttonsContext.size,
+    radius = buttonsContext.radius ?? providerContext.radius,
+    accentColor = buttonsContext.accentColor ?? providerContext.accentColor,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cx(buttonCva({ size: size2, icon: true, variant }), radiusCva({ radius, maxLarge: false }), className),
+      ref,
+      "data-accent-color": accentColor,
+      ...rest,
+      children
+    }
+  );
+});
+IconButton.displayName = "IconButton";
+const AlertDialogProvider = memo((props) => {
   const { children } = props;
   const [open, setOpen] = useState(false);
   const [options, setOptions] = useState(null);
@@ -475,7 +469,8 @@ const AlertDialogProvider = (props) => {
       ] })
     ] }) }) })
   ] });
-};
+});
+AlertDialogProvider.displayName = "AlertDialogProvider";
 const AlertDialog = {
   Content: AlertDialogContent,
   Trigger: RadixAlertDialog.Trigger,
@@ -513,14 +508,14 @@ const avatarFallback = cva(["flex", "items-center", "justify-center", "size-full
     variant: "solid"
   }
 });
-const AvatarFallback = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const AvatarFallback = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   const { variant } = useContext(AvatarContext);
-  return /* @__PURE__ */ jsx(RadixAvatar.AvatarFallback, { className: cx(avatarFallback({ variant }), className), ref, ...rest });
+  return /* @__PURE__ */ jsx(RadixAvatar.AvatarFallback, { className: cx(avatarFallback({ variant }), className), ref, ...rest, children });
 });
 AvatarFallback.displayName = "AvatarFallback";
-const AvatarImage = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const AvatarImage = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     RadixAvatar.Image,
     {
@@ -531,15 +526,16 @@ const AvatarImage = forwardRef((props, ref) => {
   );
 });
 AvatarImage.displayName = "AvatarImage";
-const AvatarRoot = forwardRef((props, ref) => {
+const AvatarRoot = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     size: size2,
     variant = "solid",
     accentColor = providerContext.accentColor,
     radius = providerContext.radius,
-    children,
     ...rest
   } = props;
   return /* @__PURE__ */ jsx(
@@ -638,9 +634,10 @@ const badge = cva(["inline-flex", "items-center", "shrink-0", "whitespace-nowrap
     icon: false
   }
 });
-const Badge = forwardRef((props, ref) => {
+const Badge = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
     children,
     className,
     accentColor = providerContext.accentColor,
@@ -682,9 +679,11 @@ const cardCva = cva([], {
     variant: "surface"
   }
 });
-const Card = forwardRef((props, ref) => {
+const Card = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     size: size2 = "md",
     variant = "surface",
@@ -698,19 +697,21 @@ const Card = forwardRef((props, ref) => {
       ref,
       className: cx(cardCva({ size: size2, variant }), radiusCva({ radius, maxLarge: true }), className),
       "data-accent-color": accentColor,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
 Card.displayName = "Card";
-const CheckboxIndicator = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const CheckboxIndicator = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     RadixCheckbox.CheckboxIndicator,
     {
       className: cx("flex items-center justify-center", className),
       ref,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
@@ -758,9 +759,11 @@ const checkbox = cva(
     }
   }
 );
-const CheckboxRoot = forwardRef((props, ref) => {
+const CheckboxRoot = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     variant,
     size: size2,
@@ -774,7 +777,8 @@ const CheckboxRoot = forwardRef((props, ref) => {
       className: cx(checkbox({ variant, size: size2 }), radiusCva({ radius, maxLarge: true }), className),
       ref,
       "data-accent-color": accentColor,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
@@ -1268,7 +1272,7 @@ function getCheckedState$1(checked) {
 function getActiveState(active) {
   return active ? "active" : "inactive";
 }
-const CommandMenuCheckboxIndicator = (props) => {
+const CommandMenuCheckboxIndicator = memo((props) => {
   const { ref, className, children, ...rest } = props;
   const checkedState = use(CheckboxIndicatorContext);
   const computedChildren = useMemo(() => {
@@ -1290,7 +1294,8 @@ const CommandMenuCheckboxIndicator = (props) => {
       children: computedChildren
     }
   );
-};
+});
+CommandMenuCheckboxIndicator.displayName = "CommandMenuCheckboxIndicator";
 const commandMenuContentCva = cva(
   [
     "ring",
@@ -1521,14 +1526,15 @@ const CommandMenuItem = memo((props) => {
   );
 });
 CommandMenuItem.displayName = "CommandMenuItem";
-const CommandMenuCheckboxItem = (props) => {
+const CommandMenuCheckboxItem = memo((props) => {
   const { children, ref, checked, onCheckedChange, onSelect, ...rest } = props;
   const handleSelect = useCallback(() => {
     onSelect == null ? void 0 : onSelect();
     onCheckedChange(checked !== true);
   }, [checked, onCheckedChange, onSelect]);
   return /* @__PURE__ */ jsx(CheckboxIndicatorContext, { value: checked, children: /* @__PURE__ */ jsx(CommandMenuItem, { ref, onSelect: handleSelect, "data-state": getCheckedState$1(checked), ...rest, children }) });
-};
+});
+CommandMenuCheckboxItem.displayName = "CommandMenuCheckboxItem";
 const CommandMenuContent = memo((props) => {
   const providerContext = useProvider();
   const {
@@ -1655,18 +1661,20 @@ const CommandMenuOverlay = memo((props) => {
   return /* @__PURE__ */ jsx(DialogPortal, { container, children: /* @__PURE__ */ jsx(DialogOverlay$1, { className: cx(commandMenuOverlayCva(), className), "data-floating-content": "", ...rest }) });
 });
 CommandMenuOverlay.displayName = "CommandMenuOverlay";
-const CommandMenuPage = (props) => {
+const CommandMenuPage = memo((props) => {
   const { children, ref, page, ...rest } = props;
   const { page: activePage } = use(CommandMenuPageContext);
   const isActive = useMemo(() => page === activePage, [page, activePage]);
   return /* @__PURE__ */ jsx("div", { ref, "data-active": getActiveState(isActive), hidden: !isActive, ...rest, children: isActive ? children : null });
-};
-const CommandMenuPages = (props) => {
+});
+CommandMenuPage.displayName = "CommandMenuPage";
+const CommandMenuPages = memo((props) => {
   const { children, defaultPage = "", page: controlledPage, onPageChange } = props;
   const [page, setPage] = useControlledState(defaultPage, controlledPage, onPageChange);
   return /* @__PURE__ */ jsx(CommandMenuPageContext, { value: { page, setPage }, children });
-};
-const CommandMenuPageTriggerItem = (props) => {
+});
+CommandMenuPages.displayName = "CommandMenuPages";
+const CommandMenuPageTriggerItem = memo((props) => {
   const { ref, page, onSelect, closeOnSelect = false, ...rest } = props;
   const { page: activePage, setPage } = use(CommandMenuPageContext);
   const isActive = useMemo(() => page === activePage, [page, activePage]);
@@ -1684,7 +1692,8 @@ const CommandMenuPageTriggerItem = (props) => {
       ...rest
     }
   ) });
-};
+});
+CommandMenuPageTriggerItem.displayName = "CommandMenuPageTriggerItem";
 const CommandMenuRadioGroup = genericMemo(function CommandMenuRadioGroup2(props) {
   const { children, ref, required, defaultValue, value, onValueChange, ...rest } = props;
   return /* @__PURE__ */ jsx(CommandMenuGroup, { ref, role: "radiogroup", ...rest, children: required ? /* @__PURE__ */ jsx(
@@ -1747,7 +1756,7 @@ const CommandMenuSelectAllItem = genericMemo(function(props) {
     }
   ) });
 });
-const CommandMenuSelectedIndicator = (props) => {
+const CommandMenuSelectedIndicator = memo((props) => {
   const { ref, className, children, ...rest } = props;
   const isSelected = use(SelectedIndicatorContext$1);
   const computedChildren = useMemo(() => {
@@ -1769,7 +1778,8 @@ const CommandMenuSelectedIndicator = (props) => {
       children: computedChildren
     }
   );
-};
+});
+CommandMenuSelectedIndicator.displayName = "CommandMenuSelectedIndicator";
 const CommandMenuSeparator = memo((props) => {
   const { className, ref, spacing = false, ...rest } = props;
   const { size: size2 } = use(CommandMenuContext);
@@ -1958,7 +1968,7 @@ const monthCaptionCva = cva(["font-medium", "w-full", "flex", "justify-center",
     }
   }
 });
-const DayPicker = (props) => {
+const DayPicker = memo((props) => {
   const providerContext = useProvider();
   const {
     components,
@@ -2016,7 +2026,8 @@ const DayPicker = (props) => {
       ...rest
     }
   );
-};
+});
+DayPicker.displayName = "DayPicker";
 const CloseDialogContext = createContext({});
 const useCloseDialog = () => {
   const dialogContext = useContext(CloseDialogContext);
@@ -2025,10 +2036,10 @@ const useCloseDialog = () => {
   }
   return dialogContext;
 };
-const DialogContent = forwardRef((props, ref) => {
+const DialogContent = memo((props) => {
   const { radius } = useProvider();
   const close = useCloseDialog();
-  const { children, container, className, size: size2, ...rest } = props;
+  const { ref, children, container, className, size: size2, ...rest } = props;
   const computedChildren = useMemo(() => {
     return typeof children === "function" ? children(close) : children;
   }, [children, close]);
@@ -2044,20 +2055,21 @@ const DialogContent = forwardRef((props, ref) => {
   ) });
 });
 DialogContent.displayName = "DialogContent";
-const DialogOverlay = forwardRef((props, ref) => {
-  const { className, container, ...rest } = props;
+const DialogOverlay = memo((props) => {
+  const { ref, children, className, container, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixDialog.Portal, { container, children: /* @__PURE__ */ jsx(
     RadixDialog.Overlay,
     {
       ref,
       className: cx(dialogOverlay({}), className),
       "data-floating-content": "",
-      ...rest
+      ...rest,
+      children
     }
   ) });
 });
 DialogOverlay.displayName = "DialogOverlay";
-const DialogRoot = (props) => {
+const DialogRoot = memo((props) => {
   const {
     children,
     onOpen,
@@ -2097,7 +2109,8 @@ const DialogRoot = (props) => {
     [handleOpenChange]
   );
   return /* @__PURE__ */ jsx(RadixDialog.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(CloseDialogContext.Provider, { value: closeDialog, children }) });
-};
+});
+DialogRoot.displayName = "DialogRoot";
 const Dialog = {
   Root: DialogRoot,
   Content: DialogContent,
@@ -2145,8 +2158,19 @@ const headingCva = cva([], {
     }
   }
 });
-const Heading = forwardRef((props, ref) => {
-  const { className, level = "1", size: size2, weight, align, highContrast = false, accentColor, ...rest } = props;
+const Heading = memo((props) => {
+  const {
+    ref,
+    children,
+    className,
+    level = "1",
+    size: size2,
+    weight,
+    align,
+    highContrast = false,
+    accentColor,
+    ...rest
+  } = props;
   const Tag = headingLevelTagMapping[level];
   return /* @__PURE__ */ jsx(
     Tag,
@@ -2161,14 +2185,15 @@ const Heading = forwardRef((props, ref) => {
         className
       ),
       "data-accent-color": accentColor,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
 Heading.displayName = "Heading";
-const HoverCardArrow = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixHoverCard.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest });
+const HoverCardArrow = memo((props) => {
+  const { ref, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixHoverCard.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest, children });
 });
 HoverCardArrow.displayName = "HoverCardArrow";
 const hoverCardContent = cva(["bg-(--color-background)", "dark:bg-(--base-2)", "ring-1", "ring-(--base-6)"], {
@@ -2185,9 +2210,11 @@ const hoverCardContent = cva(["bg-(--color-background)", "dark:bg-(--base-2)", "
     size: "md"
   }
 });
-const HoverCardContent = forwardRef((props, ref) => {
+const HoverCardContent = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     size: size2,
     side,
@@ -2211,7 +2238,8 @@ const HoverCardContent = forwardRef((props, ref) => {
       "data-accent-color": accentColor,
       sideOffset,
       "data-floating-content": "",
-      ...rest
+      ...rest,
+      children
     }
   ) });
 });
@@ -2311,22 +2339,25 @@ const inputSlot = cva(["peer/slot", "slot"], {
     size: "md"
   }
 });
-const InputField = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const InputField = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   const { size: size2, variant } = useContext(InputContext);
   return /* @__PURE__ */ jsx(
     "input",
     {
       className: cx(inputField({ size: size2, variant }), "grow bg-transparent outline-0", className),
       ref,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
 InputField.displayName = "InputField";
-const InputRoot = forwardRef((props, ref) => {
+const InputRoot = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     variant = "surface",
     size: size2 = "md",
@@ -2340,15 +2371,16 @@ const InputRoot = forwardRef((props, ref) => {
       className: cx(inputRoot$1({ variant, size: size2 }), radiusCva({ radius, maxLarge: false }), className),
       ref,
       "data-accent-color": accentColor,
-      ...rest
+      ...rest,
+      children
     }
   ) });
 });
 InputRoot.displayName = "InputRoot";
-const InputSlot = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const InputSlot = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   const { size: size2, variant } = useContext(InputContext);
-  return /* @__PURE__ */ jsx("div", { className: cx(inputSlot({ size: size2, variant }), "flex items-center", className), ref, ...rest });
+  return /* @__PURE__ */ jsx("div", { className: cx(inputSlot({ size: size2, variant }), "flex items-center", className), ref, ...rest, children });
 });
 InputSlot.displayName = "InputSlot";
 const Input = {
@@ -2358,31 +2390,36 @@ const Input = {
 };
 const LayoutContext = createContext({});
 const useLayoutContext = () => useContext(LayoutContext);
-const Container = memo(
-  forwardRef((props, ref) => {
-    const { children, className, ...rest } = props;
-    const { hideLayout = false } = useLayoutContext();
-    return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx("flex h-full grow", className), ref, ...rest, children });
-  })
-);
-const Root2 = memo((props) => {
+const LayoutContainer = memo((props) => {
+  const { ref, children, className, ...rest } = props;
+  const { hideLayout = false } = useLayoutContext();
+  return !hideLayout && /* @__PURE__ */ jsx("div", { className: cx("flex h-full grow", className), ref, ...rest, children });
+});
+LayoutContainer.displayName = "LayoutContainer";
+const LayoutRoot = memo((props) => {
   const { children, small = false, hideLayout = false } = props;
-  const [showLeftSlideOut, setShowLeftSlideOut] = useState(false);
-  const [showRightSlideOut, setShowRightSlideOut] = useState(false);
+  const [openMapping, setOpenMapping] = useState({});
+  const isOpen = useCallback(
+    (id) => {
+      return openMapping[id] ?? false;
+    },
+    [openMapping]
+  );
+  const setOpen = useCallback((id, open) => {
+    setOpenMapping((prev) => ({ ...prev, [id]: open }));
+  }, []);
   const contextValue = useMemo(
     () => ({
       small,
       hideLayout,
-      showLeftSlideOut,
-      setShowLeftSlideOut,
-      showRightSlideOut,
-      setShowRightSlideOut
+      isOpen,
+      setOpen
     }),
-    [hideLayout, showLeftSlideOut, showRightSlideOut, small]
+    [hideLayout, isOpen, setOpen, small]
   );
   return /* @__PURE__ */ jsx(LayoutContext.Provider, { value: contextValue, children });
 });
-Root2.displayName = "Layout.Root";
+LayoutRoot.displayName = "LayoutRoot";
 function usePointerDownOutside(onPointerDownOutside, ownerElement = globalThis == null ? void 0 : globalThis.document.body) {
   const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
   const isPointerInsideReactTreeRef = useRef(false);
@@ -2445,293 +2482,266 @@ function useCallbackRef(callback) {
   }, []);
 }
 const TIMEOUT_DURATION = 200;
-const SlideOut = memo(
-  forwardRef((props, ref) => {
-    const {
-      className,
-      style,
-      children,
-      open,
-      hide: hide2 = false,
-      modal = false,
-      overlayComponent,
-      resizeable = true,
-      side,
-      position = "relative",
-      initialWidth,
-      minWidth,
-      maxWidth,
-      onDismiss,
-      onOpening,
-      onClosed,
-      content
-    } = props;
-    const isLeft = side === "left";
-    const [parentContainer, setParentContainer] = useState(document.body);
-    const childrenContainerRef = useRef(null);
-    const 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);
-      }
-    }, []);
-    useEffect(() => {
-      if (!childrenContainerRef.current) return;
-      const originalParentPointerEvents = childrenContainerRef.current.style.pointerEvents;
-      if (open && modal) {
-        childrenContainerRef.current.style.pointerEvents = "none";
+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);
+    }
+  }, []);
+  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;
       }
-      return () => {
-        if (childrenContainerRef.current) {
-          childrenContainerRef.current.style.pointerEvents = originalParentPointerEvents;
-        }
-      };
-    }, [modal, open, parentContainer.style]);
-    const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
-    const CSSTransitionClassNames = 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)"
-      }),
-      [isLeft]
-    );
-    const handleMouseDown = useCallback((e) => {
+    };
+  }, [modal, open, parentContainer.style]);
+  const { onPointerDownCapture: handlePointerDownCapture } = usePointerDownOutside(handleDismiss, parentContainer);
+  const CSSTransitionClassNames = 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)"
+    }),
+    [isLeft]
+  );
+  const handleMouseDown = useCallback((e) => {
+    const { clientX } = e;
+    prevClientX.current = clientX;
+    setIsResizing(true);
+  }, []);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isResizing) return;
       const { clientX } = e;
+      const deltaX = (clientX - prevClientX.current) * (isLeft ? 1 : -1);
       prevClientX.current = clientX;
-      setIsResizing(true);
-    }, []);
-    const handleMouseMove = useCallback(
-      (e) => {
-        if (!isResizing) return;
-        const { clientX } = e;
-        const deltaX = (clientX - prevClientX.current) * (isLeft ? 1 : -1);
-        prevClientX.current = clientX;
-        setComputedWidth((prevWidth) => prevWidth + deltaX);
-      },
-      [isLeft, isResizing]
-    );
-    const handleMouseUp = useCallback(() => {
-      if (!isResizing) return;
-      prevClientX.current = null;
-      setIsResizing(false);
-    }, [isResizing]);
-    useEffect(() => {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-      return () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
-      };
-    }, [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",
+      setComputedWidth((prevWidth) => prevWidth + deltaX);
+    },
+    [isLeft, isResizing]
+  );
+  const handleMouseUp = useCallback(() => {
+    if (!isResizing) return;
+    prevClientX.current = null;
+    setIsResizing(false);
+  }, [isResizing]);
+  useEffect(() => {
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [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",
                   {
-                    "left-0": isLeft,
-                    "right-0": !isLeft,
-                    absolute: position === "absolute",
-                    relative: position === "relative"
-                  },
-                  className
+                    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
+                  }
                 ),
-                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
+                content
+              ]
+            }
+          )
+        }
+      )
+    ),
+    [
+      CSSTransitionClassNames,
+      open,
+      onOpening,
+      onClosed,
+      className,
+      isLeft,
+      position,
+      mergedRefs,
+      handlePointerDownCapture,
+      side,
+      resizableStyle,
+      handleMouseDown,
+      isResizing,
+      resizableEnable,
+      content
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "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
+        ] })
       ]
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "relative flex h-full max-h-full w-full max-w-full overflow-hidden",
-        ref: handleAssignParentContainer,
-        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
-          ] })
-        ]
-      }
-    );
-  })
-);
+    }
+  );
+});
+SlideOut.displayName = "SlideOut";
 const DEFAULT_INITIAL_WIDTH = "30%";
-const SlideOutImpl = memo(
-  forwardRef((props, ref) => {
-    const { small, hideLayout } = useLayoutContext();
-    const { className, showSlideOut, setShowSlideOut, defaultOpen, side, ...rest } = props;
-    useEffect(() => {
-      if (small && (defaultOpen == null ? void 0 : defaultOpen.small) !== void 0) {
-        setShowSlideOut(defaultOpen == null ? void 0 : defaultOpen.small);
-      } else if (!small && (defaultOpen == null ? void 0 : defaultOpen.large) !== void 0) {
-        setShowSlideOut(defaultOpen == null ? void 0 : defaultOpen.large);
-      }
-    }, [defaultOpen, setShowSlideOut, small]);
-    const handleDismiss = useCallback(() => {
-      setShowSlideOut(false);
-    }, [setShowSlideOut]);
-    const mergedProps = useMemo(
-      () => ({
-        // controlled props
-        ...{
-          open: showSlideOut,
-          initialWidth: DEFAULT_INITIAL_WIDTH,
-          modal: small,
-          onDismiss: handleDismiss,
-          position: small ? "absolute" : "relative"
-        },
-        // uncontrolled props
-        ...rest
-      }),
-      [handleDismiss, rest, showSlideOut, small]
-    );
-    return !hideLayout && /* @__PURE__ */ jsx(
-      SlideOut,
-      {
-        className: cx(`overmap-layout-slideOut-${side}`, className),
-        side,
-        ref,
-        ...mergedProps
-      }
-    );
-  })
-);
-const LeftSlideOut = memo(
-  forwardRef((props, ref) => {
-    const { showLeftSlideOut, setShowLeftSlideOut } = useLayoutContext();
-    return /* @__PURE__ */ jsx(
-      SlideOutImpl,
-      {
-        side: "left",
-        showSlideOut: showLeftSlideOut,
-        setShowSlideOut: setShowLeftSlideOut,
-        ref,
-        ...props
-      }
-    );
-  })
-);
-const RightSlideOut = memo(
-  forwardRef((props, ref) => {
-    const { showRightSlideOut, setShowRightSlideOut } = useLayoutContext();
-    return /* @__PURE__ */ jsx(
-      SlideOutImpl,
-      {
-        side: "right",
-        showSlideOut: showRightSlideOut,
-        setShowSlideOut: setShowRightSlideOut,
-        ref,
-        ...props
-      }
-    );
-  })
-);
-const SlideOutOverlay = memo(
-  forwardRef((props, ref) => {
-    const { className, active, side, smallModeOnly = false, ...rest } = props;
-    const { small, hideLayout, showLeftSlideOut, showRightSlideOut } = useLayoutContext();
-    const showOverlay = useMemo(() => {
-      if (active !== void 0) return active;
-      if (hideLayout) return false;
-      if (smallModeOnly && !small) return false;
-      return side === "left" ? showLeftSlideOut : showRightSlideOut;
-    }, [active, hideLayout, showLeftSlideOut, showRightSlideOut, side, small, smallModeOnly]);
-    return showOverlay && /* @__PURE__ */ jsx("div", { className: cx("overmap-layout-overlay", "fixed inset-0", className), ref, ...rest });
-  })
-);
+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,
+      open,
+      initialWidth,
+      modal: small,
+      onDismiss: handleDismiss,
+      position: small ? "absolute" : "relative",
+      ...rest,
+      children
+    }
+  );
+});
+LayoutSlideOut.displayName = "LayoutSlideOut";
+const LayoutSlideOutOverlay = memo((props) => {
+  const { ref, children, className, active, slideOutId, smallModeOnly = false, ...rest } = props;
+  const { small, hideLayout, isOpen } = 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 });
+});
+LayoutSlideOutOverlay.displayName = "SlideOutOverlay";
 const MENU_OVERFLOW_PADDING = 20;
 const MENU_CONTENT_PADDING = 8;
 const MENU_MINIMUM_MAX_HEIGHT = 250;
@@ -2766,35 +2776,32 @@ function getBooleanState(value) {
 function getOpenState(open) {
   return open ? "open" : "closed";
 }
-function nextStateBasedOnType(prevState, type) {
+function nextStateBasedOnType(open, type) {
   switch (type) {
     case "toggle":
-      return !prevState;
+      return !open;
     case "open":
       return true;
     case "close":
       return false;
   }
 }
-const SlideOutTrigger = memo(
-  forwardRef((props, ref) => {
-    const { side, type = "toggle", children } = props;
-    const { showLeftSlideOut, showRightSlideOut, setShowLeftSlideOut, setShowRightSlideOut } = useLayoutContext();
-    const open = side === "left" ? showLeftSlideOut : showRightSlideOut;
-    const handleClick = useCallback(() => {
-      const setShowSlideOut = side === "left" ? setShowLeftSlideOut : setShowRightSlideOut;
-      setShowSlideOut((prevState) => nextStateBasedOnType(prevState, type));
-    }, [setShowLeftSlideOut, setShowRightSlideOut, side, type]);
-    return /* @__PURE__ */ jsx(Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, children });
-  })
-);
+const LayoutSlideOutTrigger = memo((props) => {
+  const { ref, slideOutId, type = "toggle", children, ...rest } = props;
+  const { isOpen, setOpen } = useLayoutContext();
+  const open = isOpen(slideOutId);
+  const handleClick = useCallback(() => {
+    setOpen(slideOutId, nextStateBasedOnType(open, type));
+  }, [open, setOpen, slideOutId, type]);
+  return /* @__PURE__ */ jsx(Slot, { "data-state": getOpenState(open), ref, onClick: handleClick, ...rest, children });
+});
+LayoutSlideOutTrigger.displayName = "SlideOutTrigger";
 const Layout = {
-  Root: Root2,
-  Container,
-  SlideOutOverlay,
-  LeftSlideOut,
-  RightSlideOut,
-  SlideOutTrigger
+  Root: LayoutRoot,
+  Container: LayoutContainer,
+  SlideOutOverlay: LayoutSlideOutOverlay,
+  SlideOut: LayoutSlideOut,
+  SlideOutTrigger: LayoutSlideOutTrigger
 };
 const linkCva = cva(["cursor-pointer"], {
   variants: {
@@ -2832,9 +2839,11 @@ const linkCva = cva(["cursor-pointer"], {
     align: "left"
   }
 });
-const Link = forwardRef((props, ref) => {
+const Link = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     size: size2,
     weight = "regular",
@@ -2856,7 +2865,8 @@ const Link = forwardRef((props, ref) => {
         className
       ),
       "data-accent-color": accentColor,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
@@ -3406,27 +3416,26 @@ const MenuCheckboxItemIndicator = memo((props) => {
   return /* @__PURE__ */ jsx(CheckedIndicator, { ref, ...rest, children });
 });
 MenuCheckboxItemIndicator.displayName = "MenuCheckboxItemIndicator";
-const MenuClickTrigger = memo(
-  memo((props) => {
-    const { ref: forwardedRef, children, disabled = false } = props;
-    const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
-    const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
-    useEffect(() => {
-      setTriggerType("click");
-    }, [setTriggerType]);
-    return /* @__PURE__ */ jsx(
-      Slot,
-      {
-        ref: mergedRefs,
-        "aria-disabled": disabled,
-        "data-disabled": getBooleanState(disabled),
-        "data-state": getOpenState(open),
-        ...getReferenceProps({ disabled }),
-        children
-      }
-    );
-  })
-);
+const MenuClickTrigger = memo((props) => {
+  const { ref: forwardedRef, children, disabled = false } = props;
+  const { getReferenceProps, refs, setTriggerType, open } = useMenuContext();
+  const mergedRefs = useMergeRefs([refs.setReference, forwardedRef]);
+  useEffect(() => {
+    setTriggerType("click");
+  }, [setTriggerType]);
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref: mergedRefs,
+      "aria-disabled": disabled,
+      "data-disabled": getBooleanState(disabled),
+      "data-state": getOpenState(open),
+      ...getReferenceProps({ disabled }),
+      children
+    }
+  );
+});
+MenuClickTrigger.displayName = "MenuClickTrigger";
 const MenuContextTrigger = memo((props) => {
   const { ref: forwardedRef, children, disabled = false } = props;
   const ref = useRef(null);
@@ -3839,28 +3848,26 @@ const Menu = {
   Separator: MenuSeparator,
   Scroll: MenuScroll
 };
-const RiIcon = memo(
-  forwardRef((props, ref) => {
-    const { icon, size: size2, title, color, className, ...rest } = props;
-    const Icon = RiIcons[icon];
-    if (!Icon) console.error(`Icon ${icon} not found`);
-    return Icon ? (
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      /* @__PURE__ */ jsx(Icon, { className: cx("shrink-0", className), ref, title, size: size2, color, ...rest })
-    ) : /* @__PURE__ */ jsx(
-      RiQuestionMark,
-      {
-        className: cx("shrink-0", className),
-        ref,
-        title,
-        size: size2,
-        color,
-        ...rest
-      }
-    );
-  })
-);
+const RiIcon = memo((props) => {
+  const { ref, icon, size: size2, title, color, className, ...rest } = props;
+  const Icon = RiIcons[icon];
+  if (!Icon) console.error(`Icon ${icon} not found`);
+  return Icon ? (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    /* @__PURE__ */ jsx(Icon, { className: cx("shrink-0", className), ref, title, size: size2, color, ...rest })
+  ) : /* @__PURE__ */ jsx(
+    RiQuestionMark,
+    {
+      className: cx("shrink-0", className),
+      ref,
+      title,
+      size: size2,
+      color,
+      ...rest
+    }
+  );
+});
 RiIcon.displayName = "RiIcon";
 const centerStyles = { placeSelf: "center" };
 const ErrorFallback = memo((props) => {
@@ -3902,9 +3909,9 @@ const OvermapErrorBoundary = memo((props) => {
   );
 });
 OvermapErrorBoundary.displayName = "OvermapErrorBoundary";
-const PopoverArrow = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest });
+const PopoverArrow = memo((props) => {
+  const { ref, children, className, ...rest } = props;
+  return /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest, children });
 });
 PopoverArrow.displayName = "PopoverArrow";
 const popoverContent = cva(["bg-(--color-background)", "dark:bg-(--base-2)", "ring-1", "ring-(--base-6)"], {
@@ -3921,9 +3928,11 @@ const popoverContent = cva(["bg-(--color-background)", "dark:bg-(--base-2)", "ri
     size: "md"
   }
 });
-const PopoverContent = forwardRef((props, ref) => {
+const PopoverContent = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     radius = providerContext.radius,
     accentColor = providerContext.accentColor,
@@ -3945,7 +3954,8 @@ const PopoverContent = forwardRef((props, ref) => {
       sideOffset,
       "data-accent-color": accentColor,
       "data-floating-content": "",
-      ...rest
+      ...rest,
+      children
     }
   ) });
 });
@@ -4133,14 +4143,15 @@ const RadioCards = {
   Root: RadioCardsRoot,
   Item: RadioCardsItem
 };
-const RadioGroupIndicator = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const RadioGroupIndicator = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   return /* @__PURE__ */ jsx(
     RadixRadioGroup.Indicator,
     {
       className: cx("inline-flex items-center justify-center", className),
       ref,
-      ...rest
+      ...rest,
+      children
     }
   );
 });
@@ -4189,27 +4200,33 @@ const radioGroupItem = cva(
     }
   }
 );
-const RadioGroupItem = memo(
-  forwardRef((props, ref) => {
-    const radioGroupContext = useContext(RadioGroupContext);
-    const { className, size: size2 = radioGroupContext.size, variant = radioGroupContext.variant, ...rest } = props;
-    return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { className: cx(radioGroupItem({ size: size2, variant }), className), ref, ...rest });
-  })
-);
-const RadioGroupRoot = memo(
-  forwardRef((props, ref) => {
-    const providerContext = useProvider();
-    const {
-      className,
-      accentColor = providerContext.accentColor,
-      variant = "surface",
-      size: size2 = "md",
-      children,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(RadixRadioGroup.Root, { className: cx(className), ref, "data-accent-color": accentColor, ...rest, children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { variant, size: size2 }, children }) });
-  })
-);
+const RadioGroupItem = memo((props) => {
+  const radioGroupContext = useContext(RadioGroupContext);
+  const {
+    ref,
+    children,
+    className,
+    size: size2 = radioGroupContext.size,
+    variant = radioGroupContext.variant,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(RadixRadioGroup.Item, { className: cx(radioGroupItem({ size: size2, variant }), className), ref, ...rest, children });
+});
+RadioGroupItem.displayName = "RadioGroupItem";
+const RadioGroupRoot = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    className,
+    accentColor = providerContext.accentColor,
+    variant = "surface",
+    size: size2 = "md",
+    children,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(RadixRadioGroup.Root, { className: cx(className), ref, "data-accent-color": accentColor, ...rest, children: /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: { variant, size: size2 }, children }) });
+});
+RadioGroupRoot.displayName = "RadioGroupRoot";
 const RadioGroup = {
   Indicator: RadioGroupIndicator,
   Item: RadioGroupItem,
@@ -4366,8 +4383,8 @@ const useSegmentedControl = () => {
   }
   return segmentedControlContext;
 };
-const SegmentedControlItem = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const SegmentedControlItem = memo((props) => {
+  const { ref, className, ...rest } = props;
   const { size: size2, radius, variant, icon } = useSegmentedControl();
   return /* @__PURE__ */ jsx(
     RadixToggleGroup.Item,
@@ -4379,11 +4396,12 @@ const SegmentedControlItem = forwardRef((props, ref) => {
   );
 });
 SegmentedControlItem.displayName = "SegmentedControlItem";
-const SegmentedControlRoot = forwardRef((props, ref) => {
+const SegmentedControlRoot = memo((props) => {
   const providerContext = useProvider();
   const {
-    className,
+    ref,
     children,
+    className,
     size: size2 = "md",
     variant = "surface",
     icon = false,
@@ -4560,9 +4578,10 @@ const segmentedTabsTriggerCva = cva(
     }
   }
 );
-const SegmentedTabsList = forwardRef((props, ref) => {
+const SegmentedTabsList = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
     children,
     className,
     size: size2 = "md",
@@ -4591,13 +4610,13 @@ const SegmentedTabsList = forwardRef((props, ref) => {
   );
 });
 SegmentedTabsList.displayName = "TabsList";
-const SegmentedTabsRoot = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const SegmentedTabsRoot = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cx("flex flex-col", className), ...rest });
 });
 SegmentedTabsRoot.displayName = "TabsRoot";
-const SegmentedTabsTrigger = forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
+const SegmentedTabsTrigger = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   const { size: size2, radius, variant } = use(SegmentedTabsListContext);
   return /* @__PURE__ */ jsx(
     RadixTabs.Trigger,
@@ -4698,8 +4717,8 @@ const separator = cva(["shrink-0", "bg-(--accent-6)"], {
     orientation: "horizontal"
   }
 });
-const Separator = forwardRef((props, ref) => {
-  const { className, accentColor = "base", orientation, size: size2, ...rest } = props;
+const Separator = memo((props) => {
+  const { ref, className, accentColor = "base", orientation, size: size2, ...rest } = props;
   return /* @__PURE__ */ jsx(
     RadixSeparator.Root,
     {
@@ -5022,49 +5041,48 @@ const switchThumb = cva(
     }
   }
 );
-const SwitchRoot = memo(
-  forwardRef((props, ref) => {
-    const providerContext = useProvider();
-    const {
-      className,
-      size: size2 = "md",
-      children,
-      radius = providerContext.radius,
-      accentColor = providerContext.accentColor,
+const SwitchRoot = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    ref,
+    children,
+    className,
+    size: size2 = "md",
+    radius = providerContext.radius,
+    accentColor = providerContext.accentColor,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(
+    RadixSwitch.Root,
+    {
+      className: cx(switchRoot({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
+      ref,
+      "data-accent-color": accentColor,
+      ...rest,
+      children: /* @__PURE__ */ jsx(SwitchContext.Provider, { value: { size: size2, radius }, children })
+    }
+  );
+});
+SwitchRoot.displayName = "SwitchRoot";
+const SwitchThumb = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2, radius } = useContext(SwitchContext);
+  return /* @__PURE__ */ jsx(
+    RadixSwitch.Thumb,
+    {
+      className: cx(switchThumb({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
+      ref,
       ...rest
-    } = props;
-    return /* @__PURE__ */ jsx(
-      RadixSwitch.Root,
-      {
-        className: cx(switchRoot({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
-        ref,
-        "data-accent-color": accentColor,
-        ...rest,
-        children: /* @__PURE__ */ jsx(SwitchContext.Provider, { value: { size: size2, radius }, children })
-      }
-    );
-  })
-);
-const SwitchThumb = memo(
-  forwardRef((props, ref) => {
-    const { className, ...rest } = props;
-    const { size: size2, radius } = useContext(SwitchContext);
-    return /* @__PURE__ */ jsx(
-      RadixSwitch.Thumb,
-      {
-        className: cx(switchThumb({ size: size2 }), radiusCva({ radius, maxLarge: false }), className),
-        ref,
-        ...rest
-      }
-    );
-  })
-);
+    }
+  );
+});
+SwitchThumb.displayName = "SwitchThumb";
 const Switch = {
   Root: SwitchRoot,
   Thumb: SwitchThumb
 };
-const TableBody = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TableBody = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx("tbody", { ref, className: cx(className), ...rest });
 });
 TableBody.displayName = "TableBody";
@@ -5109,33 +5127,40 @@ const tableCellCva = cva([], {
     }
   }
 });
-const TableCell = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TableCell = memo((props) => {
+  const { ref, className, ...rest } = props;
   const { size: size2, border, variant } = useContext(TableContext);
   return /* @__PURE__ */ jsx("td", { ref, className: cx(tableCellCva({ size: size2, border, cell: true, variant }), className), ...rest });
 });
 TableCell.displayName = "TableCell";
-const TableColumnHeaderCell = forwardRef(
-  (props, ref) => {
-    const { className, ...rest } = props;
-    const { size: size2, border, variant } = useContext(TableContext);
-    return /* @__PURE__ */ jsx("th", { ref, className: cx(tableCellCva({ size: size2, border, cell: false, variant }), className), ...rest });
-  }
-);
+const TableColumnHeaderCell = memo((props) => {
+  const { ref, className, ...rest } = props;
+  const { size: size2, border, variant } = useContext(TableContext);
+  return /* @__PURE__ */ jsx("th", { ref, className: cx(tableCellCva({ size: size2, border, cell: false, variant }), className), ...rest });
+});
 TableColumnHeaderCell.displayName = "TableColumnHeaderCell";
-const TableFooter = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TableFooter = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx("tfoot", { ref, className: cx(className), ...rest });
 });
 TableFooter.displayName = "TableFooter";
-const TableHeader = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TableHeader = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx("thead", { ref, className: cx(className), ...rest });
 });
 TableHeader.displayName = "TableHeader";
-const TableRoot = forwardRef((props, ref) => {
+const TableRoot = memo((props) => {
   const providerContext = useProvider();
-  const { children, className, size: size2 = "md", border = "row", accentColor = "base", variant = "ghost", ...rest } = props;
+  const {
+    ref,
+    children,
+    className,
+    size: size2 = "md",
+    border = "row",
+    accentColor = "base",
+    variant = "ghost",
+    ...rest
+  } = props;
   return /* @__PURE__ */ jsx(
     "table",
     {
@@ -5152,13 +5177,13 @@ const TableRoot = forwardRef((props, ref) => {
   );
 });
 TableRoot.displayName = "TableRoot";
-const TableRow = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TableRow = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx("tr", { ref, className: cx(className), ...rest });
 });
 TableRow.displayName = "TableRow";
-const TableRowHeaderCell = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TableRowHeaderCell = memo((props) => {
+  const { ref, className, ...rest } = props;
   const { size: size2, border, variant } = useContext(TableContext);
   return /* @__PURE__ */ jsx("th", { ref, className: cx(tableCellCva({ size: size2, border, cell: true, variant }), className), ...rest });
 });
@@ -5223,9 +5248,9 @@ const tabsTriggerCva = cva(
     }
   }
 );
-const TabsList = forwardRef((props, ref) => {
+const TabsList = memo((props) => {
   const providerContext = useProvider();
-  const { children, className, size: size2 = "md", accentColor = providerContext.accentColor, ...rest } = props;
+  const { ref, children, className, size: size2 = "md", accentColor = providerContext.accentColor, ...rest } = props;
   return /* @__PURE__ */ jsx(
     RadixTabs.List,
     {
@@ -5238,8 +5263,8 @@ const TabsList = forwardRef((props, ref) => {
   );
 });
 TabsList.displayName = "TabsList";
-const TabsRoot = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TabsRoot = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixTabs.Root, { ref, className: cx("flex flex-col", className), ...rest });
 });
 TabsRoot.displayName = "TabsRoot";
@@ -5250,8 +5275,8 @@ const useTabsList = () => {
   }
   return tabsListContext;
 };
-const TabsTrigger = forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
+const TabsTrigger = memo((props) => {
+  const { ref, children, className, ...rest } = props;
   const { size: size2 } = useTabsList();
   return /* @__PURE__ */ jsx(RadixTabs.Trigger, { ref, className: cx(tabsTriggerCva({ size: size2 }), className), ...rest, children });
 });
@@ -5292,8 +5317,8 @@ const textCva = cva([], {
     }
   }
 });
-const Text = forwardRef((props, ref) => {
-  const { className, size: size2, weight, align, accentColor, highContrast = false, ...rest } = props;
+const Text = memo((props) => {
+  const { ref, className, size: size2, weight, align, accentColor, highContrast = false, ...rest } = props;
   return /* @__PURE__ */ jsx(
     "span",
     {
@@ -5373,9 +5398,10 @@ const textAreaCva = cva(
     }
   }
 );
-const TextArea = forwardRef((props, ref) => {
+const TextArea = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
     className,
     size: size2,
     variant,
@@ -5425,9 +5451,10 @@ const toastCva = cva(
     }
   }
 );
-const _Toast = forwardRef(function Toast2(props, ref) {
+const _Toast = function Toast2(props) {
   const { radius, ...restProviderContext } = useProvider();
   const {
+    ref,
     title,
     description,
     icon,
@@ -5477,8 +5504,9 @@ const _Toast = forwardRef(function Toast2(props, ref) {
       ]
     }
   );
-});
+};
 const Toast = memo(_Toast);
+Toast.displayName = "Toast";
 const ToastContext = createContext({});
 const useToast = () => {
   const context = useContext(ToastContext);
@@ -5555,6 +5583,7 @@ const ToastProvider = memo(function ToastContextProvider({
     toasts.map(({ id, onClose, ...toastProps }) => /* @__PURE__ */ jsx(Toast, { ...toastProps, onClose: () => handleCloseToast(id, 0, onClose) }, id))
   ] }) });
 });
+ToastProvider.displayName = "ToastProvider";
 const toggleButtonCva = cva(
   [
     "flex",
@@ -5675,9 +5704,10 @@ const toggleButtonCva = cva(
     }
   }
 );
-const BaseToggleButton = forwardRef((props, ref) => {
+const BaseToggleButton = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
     className,
     size: size2,
     icon,
@@ -5697,12 +5727,12 @@ const BaseToggleButton = forwardRef((props, ref) => {
   );
 });
 BaseToggleButton.displayName = "BaseToggleButton";
-const IconToggleButton = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(BaseToggleButton, { ref, icon: true, ...props });
+const IconToggleButton = memo((props) => {
+  return /* @__PURE__ */ jsx(BaseToggleButton, { icon: true, ...props });
 });
 IconToggleButton.displayName = "IconToggleButton";
-const ToggleButton = forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsx(BaseToggleButton, { ref, icon: false, ...props });
+const ToggleButton = memo((props) => {
+  return /* @__PURE__ */ jsx(BaseToggleButton, { icon: false, ...props });
 });
 ToggleButton.displayName = "ToggleButton";
 const ToggleGroupContext = createContext({});
@@ -5884,8 +5914,8 @@ const ToggleGroup = {
   Item: ToggleGroupItem,
   IconItem: ToggleGroupIconItem
 };
-const TooltipArrow = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
+const TooltipArrow = memo((props) => {
+  const { ref, className, ...rest } = props;
   return /* @__PURE__ */ jsx(RadixTooltip.Arrow, { className: cx("fill-(--base-6)", className), ref, ...rest });
 });
 TooltipArrow.displayName = "TooltipArrow";
@@ -5926,14 +5956,15 @@ const tooltipContent = cva(
     }
   }
 );
-const TooltipContent = forwardRef((props, ref) => {
+const TooltipContent = memo((props) => {
   const providerContext = useProvider();
   const {
+    ref,
+    children,
     className,
     side = "top",
     size: size2,
     radius = providerContext.radius,
-    children,
     sideOffset = 2,
     container,
     ...rest
@@ -6018,7 +6049,12 @@ export {
   InputRoot,
   InputSlot,
   Layout,
+  LayoutContainer,
   LayoutContext,
+  LayoutRoot,
+  LayoutSlideOut,
+  LayoutSlideOutOverlay,
+  LayoutSlideOutTrigger,
   Link,
   Menu,
   MenuCheckboxItem,