@colixsystems/widget-sdk 0.207.0 → 0.210.0

package/dist/markdown-link-dialog.js

@@ -2,20 +2,22 @@
 //
 // A link needs a TARGET, and no selection can supply one: the author has to
 // name either a page in this app or an external address. That is a form, and a
-// form belongs in an `<Overlay>` — the SDK primitive that escapes the widget's
-// own clipping box on both hosts — not in a bespoke absolutely-positioned panel
-// the layout container would crop.
+// form belongs in a `<Modal>` — the SDK's standard dialog, which escapes the
+// widget's own clipping box on both hosts — not in a bespoke absolutely-
+// positioned panel the layout container would crop.
 //
 // Split out of markdown-input-view.js so each file stays one component's worth
 // of markup. Like every view module here it is bound per host by the caller
 // (see markdown-input.js / .native.js), so the two hosts cannot drift.
 
 import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { resolveRichTextTokens } from "./richtext-tokens.js";
 
 // The page list scrolls rather than growing an app's 40 pages past the panel.
 const PAGE_LIST_MAX_HEIGHT = 180;
 
-export function makeMarkdownLinkDialog(rn, Overlay) {
+export function makeMarkdownLinkDialog(rn, Modal, Button) {
   const { Text, View, Pressable, TextInput, ScrollView } = rn;
 
   function Field({ label, tokens, children }) {
@@ -38,50 +40,12 @@ export function makeMarkdownLinkDialog(rn, Overlay) {
     );
   }
 
-  /**
-   * @param {object} props
-   * @param {boolean} props.visible
-   * @param {() => void} props.onClose
-   * @param {(result: {label: string, target: string}) => void} props.onSubmit
-   * @param {object} props.tokens — resolveRichTextTokens output.
-   * @param {Array<{id: string, name: string}>} props.pages — pickable pages;
-   *   empty means this host offered none, so only the URL mode is shown.
-   * @param {string} props.initialLabel — the author's current selection.
-   * @param {string} [props.testID]
-   */
-  function MarkdownLinkDialog({
-    visible,
-    onClose,
-    onSubmit,
-    tokens,
-    pages,
-    initialLabel,
-    testID,
-  }) {
-    const pageList = Array.isArray(pages) ? pages.filter((p) => p && p.id) : [];
-    const canPickPage = pageList.length > 0;
-
-    const [label, setLabel] = React.useState("");
-    const [url, setUrl] = React.useState("");
-    const [pageId, setPageId] = React.useState("");
-    const [mode, setMode] = React.useState("url");
-
-    // Re-seed on each open: the author's selection and the mode they should
-    // land in are both properties of THIS opening, not of the component.
-    React.useEffect(() => {
-      if (!visible) return;
-      setLabel(typeof initialLabel === "string" ? initialLabel : "");
-      setUrl("");
-      setPageId("");
-      setMode(canPickPage ? "page" : "url");
-    }, [visible, initialLabel, canPickPage]);
-
-    const target = mode === "page" ? pageId : url.trim();
-
-    const submit = () => {
-      if (!target) return;
-      if (typeof onSubmit === "function") onSubmit({ label, target });
-    };
+  // The form is its own component so its tokens resolve INSIDE the dialog: a
+  // dialog with its own background re-inks the theme its body reads.
+  function LinkForm({ form, pageList, canPickPage, testID }) {
+    const { label, setLabel, url, setUrl, pageId, setPageId, mode, setMode } = form;
+    const theme = useHostTheme();
+    const tokens = React.useMemo(() => resolveRichTextTokens(theme), [theme]);
 
     const inputStyle = {
       fontFamily: tokens.bodyFont,
@@ -130,49 +94,9 @@ export function makeMarkdownLinkDialog(rn, Overlay) {
         ),
       );
 
-    const action = (key, text, { primary, disabled, onPress }) =>
-      React.createElement(
-        Pressable,
-        {
-          key,
-          onPress,
-          disabled,
-          accessibilityRole: "button",
-          testID: testID ? `${testID}-${key}` : undefined,
-          style: {
-            paddingVertical: tokens.markerGap,
-            paddingHorizontal: tokens.padding,
-            marginLeft: tokens.markerGap,
-            borderWidth: 1,
-            borderColor: primary ? tokens.accent : tokens.border,
-            borderRadius: tokens.radius,
-            opacity: disabled ? 0.5 : 1,
-            ...(primary ? { backgroundColor: tokens.accent } : null),
-          },
-        },
-        React.createElement(
-          Text,
-          {
-            style: {
-              fontFamily: tokens.bodyFont,
-              fontSize: tokens.codeSize,
-              fontWeight: "500",
-              color: primary ? tokens.onAccent : tokens.color,
-            },
-          },
-          text,
-        ),
-      );
-
     return React.createElement(
-      Overlay,
-      {
-        visible: !!visible,
-        onRequestClose: onClose,
-        size: "sm",
-        accessibilityLabel: "Insert link",
-        testID: testID ? `${testID}-dialog` : undefined,
-      },
+      React.Fragment,
+      null,
       React.createElement(
         Field,
         { label: "Link text", tokens },
@@ -209,6 +133,8 @@ export function makeMarkdownLinkDialog(rn, Overlay) {
               ScrollView,
               {
                 accessibilityRole: "radiogroup",
+                // Inside the dialog's scrolling body; Android needs the opt-in.
+                nestedScrollEnabled: true,
                 style: {
                   maxHeight: PAGE_LIST_MAX_HEIGHT,
                   borderWidth: 1,
@@ -264,25 +190,85 @@ export function makeMarkdownLinkDialog(rn, Overlay) {
               testID: testID ? `${testID}-url` : undefined,
             }),
           ),
+    );
+  }
 
-      React.createElement(
-        View,
-        {
-          style: {
-            flexDirection: "row",
-            justifyContent: "flex-end",
-            marginTop: tokens.markerGap,
-          },
-        },
-        action("cancel", "Cancel", { onPress: onClose }),
-        // Disabled until there is somewhere to go — an empty target would
-        // write `[text]()`, which reads as a link and goes nowhere.
-        action("insert", "Insert link", {
-          primary: true,
-          disabled: !target,
-          onPress: submit,
-        }),
-      ),
+  /**
+   * @param {object} props
+   * @param {boolean} props.visible
+   * @param {() => void} props.onClose
+   * @param {(result: {label: string, target: string}) => void} props.onSubmit
+   * @param {Array<{id: string, name: string}>} props.pages — pickable pages;
+   *   empty means this host offered none, so only the URL mode is shown.
+   * @param {string} props.initialLabel — the author's current selection.
+   * @param {string} [props.testID]
+   */
+  function MarkdownLinkDialog({
+    visible,
+    onClose,
+    onSubmit,
+    pages,
+    initialLabel,
+    testID,
+  }) {
+    const pageList = Array.isArray(pages) ? pages.filter((p) => p && p.id) : [];
+    const canPickPage = pageList.length > 0;
+
+    const [label, setLabel] = React.useState("");
+    const [url, setUrl] = React.useState("");
+    const [pageId, setPageId] = React.useState("");
+    const [mode, setMode] = React.useState("url");
+
+    // Re-seed on each open: the author's selection and the mode they should
+    // land in are both properties of THIS opening, not of the component.
+    React.useEffect(() => {
+      if (!visible) return;
+      setLabel(typeof initialLabel === "string" ? initialLabel : "");
+      setUrl("");
+      setPageId("");
+      setMode(canPickPage ? "page" : "url");
+    }, [visible, initialLabel, canPickPage]);
+
+    const target = mode === "page" ? pageId : url.trim();
+
+    const submit = () => {
+      if (!target) return;
+      if (typeof onSubmit === "function") onSubmit({ label, target });
+    };
+
+    const action = (key, title, props) =>
+      React.createElement(Button, {
+        key,
+        title,
+        testID: testID ? `${testID}-${key}` : undefined,
+        ...props,
+      });
+
+    const actions = React.createElement(
+      React.Fragment,
+      null,
+      action("cancel", "Cancel", { variant: "secondary", onPress: onClose }),
+      // Disabled until there is somewhere to go — an empty target would
+      // write `[text]()`, which reads as a link and goes nowhere.
+      action("insert", "Insert link", { disabled: !target, onPress: submit }),
+    );
+
+    return React.createElement(
+      Modal,
+      {
+        visible: !!visible,
+        onRequestClose: onClose,
+        size: "sm",
+        title: "Insert link",
+        footer: actions,
+        testID: testID ? `${testID}-dialog` : undefined,
+      },
+      React.createElement(LinkForm, {
+        form: { label, setLabel, url, setUrl, pageId, setPageId, mode, setMode },
+        pageList,
+        canPickPage,
+        testID,
+      }),
     );
   }
 

package/dist/modal-tokens.js

@@ -0,0 +1,107 @@
+// The values `<Modal>` paints with, resolved from the theme's `modal` component
+// scope on top of the overlay's own. Platform-free, like overlay-tokens.js, so
+// both hosts draw one dialog from the same numbers.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { INK_CONTRAST, inkForBackdrop } from "./contract.js";
+import {
+  OVERLAY_DEFAULTS,
+  modalThemeScope,
+  resolveOverlayTokens,
+} from "./overlay-tokens.js";
+import { compositeOver, readableInk } from "./readable-ink.js";
+
+// The close button's touch target; its glyph is drawn at CLOSE_ICON_SIZE.
+export const MODAL_CLOSE_TARGET = 40;
+export const MODAL_CLOSE_ICON_SIZE = 20;
+
+const NO_INSETS = Object.freeze({ top: 0, bottom: 0 });
+
+/**
+ * The device safe-area insets a dialog pads its panel by: none for
+ * a centred dialog, the bottom for a sheet, top and bottom edge to edge.
+ *
+ * @param {{ size: string, presentation: string }} tokens — resolved tokens.
+ * @param {{ top?: number, bottom?: number }} [insets] — the host's insets.
+ */
+export function modalSafeInsets(tokens, insets) {
+  if (!insets) return NO_INSETS;
+  const top = tokens.size === "full" ? insets.top || 0 : 0;
+  const reachesBottom = tokens.size === "full" || tokens.presentation === "sheet";
+  const bottom = reachesBottom ? insets.bottom || 0 : 0;
+  return top || bottom ? { top, bottom } : NO_INSETS;
+}
+
+// A panel style replaces the overlay's shadow, so "none" must zero each key.
+const NO_SHADOW = Object.freeze({
+  shadowOpacity: 0,
+  shadowRadius: 0,
+  elevation: 0,
+});
+
+// The theme's own ink while it reads on the panel, else the readable fixed one.
+function inkOn(backdrop, themeInk, minimum) {
+  return inkForBackdrop(themeInk, readableInk(backdrop), backdrop, minimum);
+}
+
+/**
+ * What the scope's unset tokens show in Theme Settings where no `uiDefault`
+ * path exists: the scrim as the hex a colour field can display, and the title
+ * colour a dialog paints on the background currently set.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ */
+export function modalScopeDefaults(theme) {
+  const base = theme && typeof theme === "object" ? theme : {};
+  const { titleColor: _own, ...others } = modalThemeScope(base);
+  const untitled = { ...base, components: { ...base.components, modal: others } };
+  return {
+    scrim: "#0f172a8c",
+    titleColor: resolveModalTokens(untitled).titleColor,
+  };
+}
+
+/**
+ * Resolve one dialog: the theme's `modal` scope, then the overlay's own values,
+ * so an unthemed `<Modal>` sits on exactly the panel `<Overlay>` draws.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ * @param {{ size?: string, presentation?: string }} [options] — the overlay's
+ *   `sm` | `md` | `lg` | `full` and `dialog` | `sheet`.
+ */
+export function resolveModalTokens(theme, { size, presentation } = {}) {
+  const overlay = resolveOverlayTokens(theme, size, presentation);
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const fallback = DEFAULT_THEME_TOKENS;
+  const colors = base.colors || fallback.colors;
+  const spacing = base.spacing || fallback.spacing;
+  const levels = base.elevation || fallback.elevation;
+  const scope = modalThemeScope(base);
+  const background = scope.background || overlay.surface;
+  // A translucent fill is judged as it lands on the panel surface under it.
+  const backdrop = compositeOver(background, overlay.surface);
+  const onSurface = colors.onSurface || fallback.colors.onSurface;
+  const onSurfaceMuted = colors.onSurfaceMuted || fallback.colors.onSurfaceMuted;
+
+  return {
+    size: overlay.size,
+    presentation: overlay.presentation,
+    scrim: overlay.scrim,
+    background,
+    // What the panel paints: `background` as it lands on the overlay surface,
+    // so a see-through one never shows the scrim and the ink maths holds.
+    panelColor: backdrop,
+    // What the body sits on; null while the theme's own surface stands.
+    bodyBackdrop: scope.background ? backdrop : null,
+    // Edge to edge has no corner to round, whatever the theme says.
+    radius: overlay.size === "full" ? 0 : scope.radius ?? overlay.radius,
+    padding: scope.padding ?? overlay.padding,
+    // Null keeps the overlay's own elevation: the look with no token set.
+    shadow: scope.shadow ? { ...NO_SHADOW, ...levels[scope.shadow] } : null,
+    shadowLevel: scope.shadow || OVERLAY_DEFAULTS.elevation,
+    titleColor: scope.titleColor || inkOn(backdrop, onSurface, INK_CONTRAST.text),
+    closeColor: inkOn(backdrop, onSurfaceMuted, INK_CONTRAST.boundary),
+    sectionGap: spacing.md ?? fallback.spacing.md,
+    actionGap: spacing.sm ?? fallback.spacing.sm,
+  };
+}

package/dist/modal-view.js

@@ -0,0 +1,255 @@
+// The ONE implementation behind the `<Modal>` SDK component: the standard
+// dialog, drawn inside `<Overlay>` so it leaves the widget's box on both hosts.
+//
+// Bound per host by modal.js / modal.native.js, which differ only in where the
+// primitives come from, so the web Player and the Expo export cannot drift.
+
+import React from "react";
+import { ThemeScope, useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { overlayCornerStyle } from "./overlay-tokens.js";
+import {
+  MODAL_CLOSE_ICON_SIZE,
+  MODAL_CLOSE_TARGET,
+  modalSafeInsets,
+  resolveModalTokens,
+} from "./modal-tokens.js";
+import { surfaceAwareTheme } from "./surface-theme.js";
+import { textRoleStyle } from "./text-roles.js";
+
+// Pulls the glyph, not its touch target, onto the panel's padding edge.
+const CLOSE_EDGE_PULL = -(MODAL_CLOSE_TARGET - MODAL_CLOSE_ICON_SIZE) / 2;
+
+const useNoInsets = () => null;
+
+function headerStyle(t) {
+  // Never less than the pull, or the close target would leave the panel.
+  const edge = Math.max(t.padding, -CLOSE_EDGE_PULL);
+  return {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: t.actionGap,
+    paddingTop: edge,
+    paddingLeft: t.padding,
+    paddingRight: edge,
+    paddingBottom: t.sectionGap,
+  };
+}
+
+function closeStyle(pressed) {
+  return {
+    width: MODAL_CLOSE_TARGET,
+    height: MODAL_CLOSE_TARGET,
+    alignItems: "center",
+    justifyContent: "center",
+    marginLeft: "auto",
+    marginRight: CLOSE_EDGE_PULL,
+    marginVertical: CLOSE_EDGE_PULL,
+    borderRadius: MODAL_CLOSE_TARGET / 2,
+    opacity: pressed ? 0.6 : 1,
+  };
+}
+
+function footerStyle(t) {
+  return {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    gap: t.actionGap,
+    paddingTop: t.sectionGap,
+    paddingHorizontal: t.padding,
+    paddingBottom: t.padding,
+  };
+}
+
+/**
+ * Bind the shared dialog to one platform's primitives and its `<Overlay>`.
+ *
+ * `useSafeAreaInsets` and `KeyboardAvoider` are the native host's: a browser
+ * lays out inside its own safe area and resizes for its own keyboard.
+ *
+ * @param {{View: any, Text: any, Pressable: any, ScrollView: any,
+ *   useSafeAreaInsets?: () => ({top: number, bottom: number}|null),
+ *   KeyboardAvoider?: any}} rn
+ * @param {any} Overlay — the host's bound `<Overlay>`.
+ */
+export function makeModal(rn, Overlay) {
+  const { View, Text, Pressable, ScrollView } = rn;
+  const useSafeAreaInsets = rn.useSafeAreaInsets || useNoInsets;
+
+  /**
+   * The standard dialog: a title, a close button, a body that scrolls when it
+   * is long, and a footer action row laid out below it. Its look follows the
+   * theme's `modal` scope (Design > Components > Dialogs). Components rendered
+   * inside it read a theme re-inked for the dialog's background.
+   *
+   * @param {object} props
+   * @param {boolean} [props.visible] — nothing is mounted while false.
+   * @param {() => void} [props.onRequestClose] — the close button, backdrop
+   *   press, Escape (web) and the Android back button all fire it. Omitted,
+   *   the dialog draws no close button and only your own controls close it.
+   * @param {boolean} [props.dismissible] — default true. False while the
+   *   dialog must stay open (a save in flight): no close button, and the
+   *   backdrop, Escape and Android back do not fire `onRequestClose`. Only
+   *   while that work runs, and always restore it: with no footer or in-body
+   *   control, such a dialog cannot be closed by anyone.
+   * @param {string} [props.title] — with no title and no close button, the
+   *   dialog has no header row.
+   * @param {any} [props.footer] — the action buttons; laid out as one
+   *   right-aligned row that wraps. Omitted, the dialog has no footer.
+   * @param {"dialog"|"sheet"} [props.presentation] — centred (default), or
+   *   anchored to the bottom edge.
+   * @param {"sm"|"md"|"lg"|"full"} [props.size] — the overlay's width tier.
+   * @param {boolean} [props.dismissOnBackdropPress] — default true.
+   * @param {"dialog"|"alertdialog"} [props.role] — default "dialog"; web only,
+   *   native has no equivalent.
+   * @param {{current: any}} [props.initialFocusRef] — the element focused on
+   *   open instead of the dialog itself; web only, a no-op on native.
+   * @param {string} [props.closeAccessibilityLabel] — default "Close".
+   * @param {string} [props.accessibilityLabel] — names a dialog with no title.
+   * @param {string} [props.testID] — on the panel; the close button, body and
+   *   footer take `-close`, `-body` and `-footer`.
+   */
+  function Modal({
+    visible = false,
+    onRequestClose,
+    dismissible = true,
+    title,
+    footer,
+    presentation = "dialog",
+    size = "md",
+    dismissOnBackdropPress = true,
+    role = "dialog",
+    initialFocusRef,
+    closeAccessibilityLabel = "Close",
+    accessibilityLabel,
+    testID,
+    children,
+  }) {
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    const deviceInsets = useSafeAreaInsets();
+    const titleId = React.useId();
+    const t = React.useMemo(
+      () => resolveModalTokens(theme, { size, presentation }),
+      [theme, size, presentation],
+    );
+    // Null while the theme's own surface stands, so the context is untouched.
+    const bodyTheme = React.useMemo(
+      () => (t.bodyBackdrop ? surfaceAwareTheme(theme, t.bodyBackdrop) : null),
+      [theme, t.bodyBackdrop],
+    );
+
+    const close =
+      dismissible && typeof onRequestClose === "function" ? onRequestClose : undefined;
+    const hasTitle = typeof title === "string" && title.length > 0;
+    const hasHeader = hasTitle || Boolean(close);
+    const hasFooter = footer !== undefined && footer !== null && footer !== false;
+    const fills = t.size === "full";
+    const insets = modalSafeInsets(t, deviceInsets);
+    const part = (name) => (testID ? `${testID}-${name}` : undefined);
+
+    const panel = {
+      padding: 0,
+      backgroundColor: t.panelColor,
+      ...overlayCornerStyle(t.radius, t.presentation),
+      ...t.shadow,
+      ...(insets.top ? { paddingTop: insets.top } : null),
+      ...(insets.bottom ? { paddingBottom: insets.bottom } : null),
+    };
+
+    const content = React.createElement(
+      React.Fragment,
+      null,
+      hasHeader
+        ? React.createElement(
+            View,
+            { style: headerStyle(t) },
+            hasTitle
+              ? React.createElement(
+                  Text,
+                  {
+                    nativeID: titleId,
+                    accessibilityRole: "header",
+                    style: {
+                      ...textRoleStyle("subtitle", theme.typography, theme.colors),
+                      flex: 1,
+                      color: t.titleColor,
+                    },
+                  },
+                  title,
+                )
+              : null,
+            close
+              ? React.createElement(
+                  Pressable,
+                  {
+                    onPress: close,
+                    accessibilityRole: "button",
+                    accessibilityLabel: closeAccessibilityLabel,
+                    testID: part("close"),
+                    style: ({ pressed }) => closeStyle(pressed),
+                  },
+                  React.createElement(Icon, {
+                    name: "x",
+                    size: MODAL_CLOSE_ICON_SIZE,
+                    color: t.closeColor,
+                  }),
+                )
+              : null,
+          )
+        : null,
+      React.createElement(
+        ScrollView,
+        {
+          // Shrinks inside the panel's height cap, so a long body scrolls here
+          // and the footer below it stays on screen.
+          style: fills ? { flex: 1 } : { flexGrow: 0, flexShrink: 1 },
+          contentContainerStyle: {
+            paddingTop: hasHeader ? 0 : t.padding,
+            paddingHorizontal: t.padding,
+            paddingBottom: hasFooter ? 0 : t.padding,
+          },
+          alwaysBounceVertical: false,
+          keyboardShouldPersistTaps: "handled",
+          testID: part("body"),
+        },
+        children,
+      ),
+      hasFooter
+        ? React.createElement(
+            View,
+            { style: footerStyle(t), testID: part("footer") },
+            footer,
+          )
+        : null,
+    );
+
+    return React.createElement(
+      Overlay,
+      {
+        visible,
+        onRequestClose: close,
+        size,
+        presentation,
+        dismissOnBackdropPress: dismissOnBackdropPress && Boolean(close),
+        // The dialog's own close button is the one a screen reader meets.
+        backdropAccessible: false,
+        role,
+        accessibilityLabelledBy: hasTitle ? titleId : undefined,
+        // Where the host cannot point at the title, the name is the title.
+        accessibilityLabel: accessibilityLabel || (hasTitle ? title : undefined),
+        initialFocusRef,
+        panelFrame: rn.KeyboardAvoider,
+        style: panel,
+        testID,
+      },
+      // The body reads a theme whose inks suit the dialog's background.
+      React.createElement(ThemeScope, { theme: bodyTheme }, content),
+    );
+  }
+
+  Modal.displayName = "Modal";
+  return Modal;
+}

package/dist/modal.js

@@ -0,0 +1,8 @@
+// `<Modal>` (web). Binds ./modal-view.js to react-native-web and the web
+// `<Overlay>`; see ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeModal } from "./modal-view.js";
+import { Overlay } from "./overlay.js";
+
+export const Modal = makeModal(ReactNative, Overlay);

package/dist/modal.native.js

@@ -0,0 +1,45 @@
+// `<Modal>` (native). Binds ./modal-view.js to React Native's own primitives
+// and the native `<Overlay>`; only the imports differ from ./modal.js, plus
+// the two things a browser does for itself: safe-area insets and keyboard
+// avoidance. Both are the dialog's own; a bare `<Overlay>` gets neither.
+
+import React from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+} from "react-native";
+// Host-provided: the exported app pins it and mounts its provider at the root.
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { makeModal } from "./modal-view.js";
+import { Overlay } from "./overlay.native.js";
+
+// Null with no provider above, which the view reads as "no insets".
+const useSafeAreaInsets = () => React.useContext(SafeAreaInsetsContext);
+
+// Wraps the panel only, so the scrim still covers the strip under a raised one.
+function KeyboardAvoider({ verticalAlign, children }) {
+  return React.createElement(
+    KeyboardAvoidingView,
+    {
+      behavior: Platform.OS === "ios" ? "padding" : "height",
+      // Lets a press beside the panel reach the backdrop behind this frame.
+      pointerEvents: "box-none",
+      style: {
+        flex: 1,
+        alignSelf: "stretch",
+        alignItems: "center",
+        justifyContent: verticalAlign,
+      },
+    },
+    children,
+  );
+}
+
+export const Modal = makeModal(
+  { View, Text, Pressable, ScrollView, useSafeAreaInsets, KeyboardAvoider },
+  Overlay,
+);