@tamagui/dialog 1.0.1-beta.151 → 1.0.1-beta.154

package/dist/cjs/Dialog.js

@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var Dialog_exports = {};
 __export(Dialog_exports, {
@@ -35,6 +38,7 @@ __export(Dialog_exports, {
   createDialogScope: () => createDialogScope
 });
 module.exports = __toCommonJS(Dialog_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var import_animate_presence = require("@tamagui/animate-presence");
 var import_aria_hidden = require("@tamagui/aria-hidden");
 var import_compose_refs = require("@tamagui/compose-refs");
@@ -56,21 +60,23 @@ const TRIGGER_NAME = "DialogTrigger";
 const DialogTriggerFrame = (0, import_core.styled)(import_stacks.YStack, {
   name: TRIGGER_NAME
 });
-const DialogTrigger = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...triggerProps } = props;
-  const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
-  const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
-  return /* @__PURE__ */ React.createElement(DialogTriggerFrame, {
-    tag: "button",
-    "aria-haspopup": "dialog",
-    "aria-expanded": context.open,
-    "aria-controls": context.contentId,
-    "data-state": getState(context.open),
-    ...triggerProps,
-    ref: composedTriggerRef,
-    onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
-  });
-});
+const DialogTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
+    const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTriggerFrame, {
+      tag: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.contentId,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onPress: (0, import_core.composeEventHandlers)(props.onPress, context.onOpenToggle)
+    });
+  }
+);
 DialogTrigger.displayName = TRIGGER_NAME;
 const PORTAL_NAME = "DialogPortal";
 const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
@@ -85,29 +91,39 @@ const DialogPortalFrame = (0, import_core.styled)(import_stacks.YStack, {
     maxHeight: "100vh"
   }
 });
-const DialogPortal = DialogPortalFrame.extractable((props) => {
-  const { __scopeDialog, forceMount, children, ...frameProps } = props;
-  const themeName = (0, import_core.useThemeName)();
-  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  const isShowing = forceMount || context.open;
-  const contents = /* @__PURE__ */ React.createElement(import_animate_presence.AnimatePresence, null, isShowing ? children : null);
-  const isSheet = useShowDialogSheet(context);
-  if (!context.modal || isSheet) {
-    return contents;
+const DialogPortal = DialogPortalFrame.extractable(
+  (props) => {
+    const { __scopeDialog, forceMount, children, ...frameProps } = props;
+    const themeName = (0, import_core.useThemeName)();
+    const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+    const isShowing = forceMount || context.open;
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_animate_presence.AnimatePresence, {
+      children: isShowing ? children : null
+    });
+    const isSheet = useShowDialogSheet(context);
+    if (!context.modal || isSheet) {
+      return contents;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
+        scope: __scopeDialog,
+        ...context,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Theme, {
+          name: themeName,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, {
+            scope: __scopeDialog,
+            forceMount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPortalFrame, {
+              pointerEvents: isShowing ? "auto" : "none",
+              ...frameProps,
+              children: contents
+            })
+          })
+        })
+      })
+    });
   }
-  return /* @__PURE__ */ React.createElement(import_portal.PortalItem, null, /* @__PURE__ */ React.createElement(DialogProvider, {
-    scope: __scopeDialog,
-    ...context
-  }, /* @__PURE__ */ React.createElement(import_core.Theme, {
-    name: themeName
-  }, /* @__PURE__ */ React.createElement(PortalProvider, {
-    scope: __scopeDialog,
-    forceMount
-  }, /* @__PURE__ */ React.createElement(DialogPortalFrame, {
-    pointerEvents: isShowing ? "auto" : "none",
-    ...frameProps
-  }, contents)))));
-});
+);
 DialogPortal.displayName = PORTAL_NAME;
 const OVERLAY_NAME = "DialogOverlay";
 const DialogOverlayFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
@@ -115,38 +131,43 @@ const DialogOverlayFrame = (0, import_core.styled)(import_stacks.ThemeableStack,
   backgrounded: true,
   fullscreen: true
 });
-const DialogOverlay = React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
-  const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
-  const { forceMount = portalContext.forceMount, ...overlayProps } = props;
-  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
-  const showSheet = useShowDialogSheet(context);
-  if (!forceMount) {
-    if (!context.modal || showSheet) {
-      return null;
+const DialogOverlay = React.forwardRef(
+  ({ __scopeDialog, ...props }, forwardedRef) => {
+    const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
+    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+    const showSheet = useShowDialogSheet(context);
+    if (!forceMount) {
+      if (!context.modal || showSheet) {
+        return null;
+      }
     }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, {
+      context,
+      ...overlayProps,
+      ref: forwardedRef
+    });
   }
-  return /* @__PURE__ */ React.createElement(DialogOverlayImpl, {
-    context,
-    ...overlayProps,
-    ref: forwardedRef
-  });
-});
+);
 DialogOverlay.displayName = OVERLAY_NAME;
-const DialogOverlayImpl = React.forwardRef((props, forwardedRef) => {
-  const { context, ...overlayProps } = props;
-  return /* @__PURE__ */ React.createElement(import_remove_scroll.RemoveScroll, {
-    enabled: context.open,
-    as: import_core.Slot,
-    allowPinchZoom: context.allowPinchZoom,
-    shards: [context.contentRef],
-    removeScrollBar: false
-  }, /* @__PURE__ */ React.createElement(DialogOverlayFrame, {
-    "data-state": getState(context.open),
-    pointerEvents: context.open ? "auto" : "none",
-    ...overlayProps,
-    ref: forwardedRef
-  }));
-});
+const DialogOverlayImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { context, ...overlayProps } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_remove_scroll.RemoveScroll, {
+      enabled: context.open,
+      as: import_core.Slot,
+      allowPinchZoom: context.allowPinchZoom,
+      shards: [context.contentRef],
+      removeScrollBar: false,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayFrame, {
+        "data-state": getState(context.open),
+        pointerEvents: context.open ? "auto" : "none",
+        ...overlayProps,
+        ref: forwardedRef
+      })
+    });
+  }
+);
 const CONTENT_NAME = "DialogContent";
 const DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack, {
   name: CONTENT_NAME,
@@ -167,144 +188,173 @@ const DialogContentFrame = (0, import_core.styled)(import_stacks.ThemeableStack,
     size: "$4"
   }
 });
-const DialogContent = DialogContentFrame.extractable(React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
-  const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
-  const { forceMount = portalContext.forceMount, ...contentProps } = props;
-  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, {
-    context,
-    ...contentProps,
-    ref: forwardedRef
-  }) : /* @__PURE__ */ React.createElement(DialogContentNonModal, {
-    context,
-    ...contentProps,
-    ref: forwardedRef
-  }));
-}));
+const DialogContent = DialogContentFrame.extractable(
+  React.forwardRef(
+    ({ __scopeDialog, ...props }, forwardedRef) => {
+      const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
+      const { forceMount = portalContext.forceMount, ...contentProps } = props;
+      const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children: context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, {
+          context,
+          ...contentProps,
+          ref: forwardedRef
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, {
+          context,
+          ...contentProps,
+          ref: forwardedRef
+        })
+      });
+    }
+  )
+);
 DialogContent.displayName = CONTENT_NAME;
-const DialogContentModal = React.forwardRef(({ children, context, ...props }, forwardedRef) => {
-  const contentRef = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
-  React.useEffect(() => {
-    if (!context.open)
-      return;
-    const content = contentRef.current;
-    if (content)
-      return (0, import_aria_hidden.hideOthers)(content);
-  }, [context.open]);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, {
-    ...props,
-    context,
-    ref: composedRefs,
-    trapFocus: context.open,
-    disableOutsidePointerEvents: true,
-    onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
-      var _a;
-      event.preventDefault();
-      (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
-    }),
-    onPointerDownOutside: (0, import_core.composeEventHandlers)(props.onPointerDownOutside, (event) => {
-      const originalEvent = event["detail"].originalEvent;
-      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      if (isRightClick)
+const DialogContentModal = React.forwardRef(
+  ({ children, context, ...props }, forwardedRef) => {
+    const contentRef = React.useRef(null);
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
+    React.useEffect(() => {
+      if (!context.open)
+        return;
+      const content = contentRef.current;
+      if (content)
+        return (0, import_aria_hidden.hideOthers)(content);
+    }, [context.open]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
+      ...props,
+      context,
+      ref: composedRefs,
+      trapFocus: context.open,
+      disableOutsidePointerEvents: true,
+      onCloseAutoFocus: (0, import_core.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
+        var _a;
         event.preventDefault();
-    }),
-    onFocusOutside: (0, import_core.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault())
-  }, children);
-});
-const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
-  const hasInteractedOutsideRef = React.useRef(false);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, {
-    ...props,
-    ref: forwardedRef,
-    trapFocus: false,
-    disableOutsidePointerEvents: false,
-    onCloseAutoFocus: (event) => {
-      var _a, _b;
-      console.log("on close autofocus");
-      (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented) {
-        if (!hasInteractedOutsideRef.current) {
-          (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+        (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+      }),
+      onPointerDownOutside: (0, import_core.composeEventHandlers)(props.onPointerDownOutside, (event) => {
+        const originalEvent = event["detail"].originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        if (isRightClick)
+          event.preventDefault();
+      }),
+      onFocusOutside: (0, import_core.composeEventHandlers)(
+        props.onFocusOutside,
+        (event) => event.preventDefault()
+      ),
+      children
+    });
+  }
+);
+const DialogContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentImpl, {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      onCloseAutoFocus: (event) => {
+        var _a, _b;
+        console.log("on close autofocus");
+        (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
+        if (!event.defaultPrevented) {
+          if (!hasInteractedOutsideRef.current) {
+            (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+          }
+          event.preventDefault();
         }
-        event.preventDefault();
+        hasInteractedOutsideRef.current = false;
+      },
+      onInteractOutside: (event) => {
+        var _a;
+        (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
+        if (!event.defaultPrevented)
+          hasInteractedOutsideRef.current = true;
+        const target = event.target;
+        const trigger = props.context.triggerRef.current;
+        if (!(trigger instanceof HTMLElement))
+          return;
+        const targetIsTrigger = trigger.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
       }
-      hasInteractedOutsideRef.current = false;
-    },
-    onInteractOutside: (event) => {
-      var _a;
-      (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented)
-        hasInteractedOutsideRef.current = true;
-      const target = event.target;
-      const trigger = props.context.triggerRef.current;
-      if (!(trigger instanceof HTMLElement))
-        return;
-      const targetIsTrigger = trigger.contains(target);
-      if (targetIsTrigger)
-        event.preventDefault();
-    }
-  });
-});
-const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeDialog,
-    trapFocus,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    disableOutsidePointerEvents,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    context,
-    ...contentProps
-  } = props;
-  const contentRef = React.useRef(null);
-  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
-  const showSheet = useShowDialogSheet(context);
-  const contents = /* @__PURE__ */ React.createElement(DialogContentFrame, {
-    id: context.contentId,
-    "aria-describedby": context.descriptionId,
-    "aria-labelledby": context.titleId,
-    "data-state": getState(context.open),
-    ...contentProps
-  });
-  if (showSheet) {
-    return /* @__PURE__ */ React.createElement(import_portal.PortalItem, {
-      hostName: `${context.scopeKey}SheetContents`
-    }, contentProps.children);
+    });
   }
-  if (!import_core.isWeb) {
-    return contents;
+);
+const DialogContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeDialog,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      context,
+      ...contentProps
+    } = props;
+    const contentRef = React.useRef(null);
+    const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, contentRef);
+    const showSheet = useShowDialogSheet(context);
+    const contents = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentFrame, {
+      id: context.contentId,
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.titleId,
+      "data-state": getState(context.open),
+      ...contentProps
+    });
+    if (showSheet) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalItem, {
+        hostName: `${context.scopeKey}SheetContents`,
+        children: contentProps.children
+      });
+    }
+    if (!import_core.isWeb) {
+      return contents;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_focus_scope.FocusScope, {
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          forceUnmount: !context.open,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dismissable.Dismissable, {
+            disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+            forceUnmount: !context.open,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onFocusOutside,
+            onInteractOutside,
+            ref: composedRefs,
+            onDismiss: () => context.onOpenChange(false),
+            children: contents
+          })
+        }),
+        process.env.NODE_ENV === "development" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, {
+              titleId: context.titleId
+            }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, {
+              contentRef,
+              descriptionId: context.descriptionId
+            })
+          ]
+        })
+      ]
+    });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_focus_scope.FocusScope, {
-    loop: true,
-    trapped: trapFocus,
-    onMountAutoFocus: onOpenAutoFocus,
-    forceUnmount: !context.open,
-    onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React.createElement(import_dismissable.Dismissable, {
-    disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
-    forceUnmount: !context.open,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    ref: composedRefs,
-    onDismiss: () => context.onOpenChange(false)
-  }, contents)), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
-    titleId: context.titleId
-  }), /* @__PURE__ */ React.createElement(DescriptionWarning, {
-    contentRef,
-    descriptionId: context.descriptionId
-  })));
-});
+);
 const SHEET_CONTENTS_NAME = "DialogSheetContents";
 const DialogSheetContents = ({ __scopeDialog }) => {
   const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(import_portal.PortalHost, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_portal.PortalHost, {
     name: `${context.scopeKey}SheetContents`
   });
 };
@@ -313,45 +363,51 @@ const TITLE_NAME = "DialogTitle";
 const DialogTitleFrame = (0, import_core.styled)(import_text.H2, {
   name: TITLE_NAME
 });
-const DialogTitle = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...titleProps } = props;
-  const context = useDialogContext(TITLE_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(DialogTitleFrame, {
-    id: context.titleId,
-    ...titleProps,
-    ref: forwardedRef
-  });
-});
+const DialogTitle = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitleFrame, {
+      id: context.titleId,
+      ...titleProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogTitle.displayName = TITLE_NAME;
 const DialogDescriptionFrame = (0, import_core.styled)(import_text.Paragraph, {
   name: "DialogDescription"
 });
 const DESCRIPTION_NAME = "DialogDescription";
-const DialogDescription = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...descriptionProps } = props;
-  const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(DialogDescriptionFrame, {
-    id: context.descriptionId,
-    ...descriptionProps,
-    ref: forwardedRef
-  });
-});
+const DialogDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescriptionFrame, {
+      id: context.descriptionId,
+      ...descriptionProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogDescription.displayName = DESCRIPTION_NAME;
 const CLOSE_NAME = "DialogClose";
-const DialogClose = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...closeProps } = props;
-  const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-  const isSheet = useShowDialogSheet(context);
-  if (isSheet) {
-    return null;
+const DialogClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...closeProps } = props;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
+    const isSheet = useShowDialogSheet(context);
+    if (isSheet) {
+      return null;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_stacks.YStack, {
+      tag: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: (0, import_core.composeEventHandlers)(props.onPress, () => context.onOpenChange(false))
+    });
   }
-  return /* @__PURE__ */ React.createElement(import_stacks.YStack, {
-    tag: "button",
-    ...closeProps,
-    ref: forwardedRef,
-    onPress: (0, import_core.composeEventHandlers)(props.onPress, () => context.onOpenChange(false))
-  });
-});
+);
 DialogClose.displayName = CLOSE_NAME;
 function getState(open) {
   return open ? "open" : "closed";
@@ -418,10 +474,14 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  React.useImperativeHandle(ref, () => ({
-    open: setOpen
-  }), [setOpen]);
-  return /* @__PURE__ */ React.createElement(DialogProvider, {
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      open: setOpen
+    }),
+    [setOpen]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogProvider, {
     scope: __scopeDialog,
     scopeKey: __scopeDialog ? Object.keys(__scopeDialog)[0] : "",
     triggerRef,
@@ -434,11 +494,13 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
     modal,
     allowPinchZoom,
-    sheetBreakpoint
-  }, /* @__PURE__ */ React.createElement(DialogSheetController, {
-    onChangeOpen: setOpen,
-    __scopeDialog
-  }, children));
+    sheetBreakpoint,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogSheetController, {
+      onChangeOpen: setOpen,
+      __scopeDialog,
+      children
+    })
+  });
 });
 const Dialog2 = (0, import_core.withStaticProperties)(DialogInner, {
   Trigger: DialogTrigger,
@@ -456,15 +518,16 @@ const DialogSheetController = (props) => {
   const showSheet = useShowDialogSheet(context);
   const breakpointActive = useSheetBreakpointActive(context);
   const getShowSheet = (0, import_core.useGet)(showSheet);
-  return /* @__PURE__ */ React.createElement(import_sheet.SheetController, {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_sheet.SheetController, {
     onChangeOpen: (val) => {
       if (getShowSheet()) {
         props.onChangeOpen(val);
       }
     },
     open: context.open,
-    hidden: breakpointActive === false
-  }, props.children);
+    hidden: breakpointActive === false,
+    children: props.children
+  });
 };
 const useSheetBreakpointActive = (context) => {
   const media = (0, import_core.useMedia)();